Responsivity Problem

Hi there,

i’ve created an additional site in Sydney by the site origin builder, in which i have integrated a full screen backgroundpicture over which the text (front page) is being scrolled.

On a huge PC-Screen it Looks like expected - but opening the site with a mobile device like iPad mini there appears only a small part of the backgroundpic on the Screen - it’s ‘non-responsive’ in the sense that the size of the picture isn’t adapted to the screens size. No matter if i use a FullHD-Sized Picture there, editing the picture in half or quarter size, even the Format Change from JPEG to PNG didn’t solve the Problem

Any Solutions for this?

Hi,

The background images for the rows aren’t meant to be completely responsive. They’re meant to cover the whole row on any device size. So unfortunately they cannot cover the whole row while also being completely visible at the same time.

Hi Vlad,

first of all: thank you for the fast Response!
But what does “not completely responsive” mean?
There is no change of the pic - it seems completly static, just the part Fitting into a mobile screen is shown - while the text width is adapted, the backgroundpic is not.

Perhaps there’s an other way to get the expected look on all Kind of device instead of the used one?

To avoid misuderstanding: Just have a look to www.jagdauto.net/ueber - in the Background you can see on huge Screen the entire car displayed, on mobiles just not much more than the right headlight of that car.

Any idea? Thanks in advance!

Yeah, in your case it does indeed look terrible. That’s because you have a huge row and the image is trying to cover it all.
So - to cover the whole row it needs to expand, to be responsive it needs to shrink. Obviously, both these things can’t happen at the same time.

What you can do in your situation is try this:


@media only screen and (max-width: 1024px) {
  .panel-row-style {
     background-attachment: fixed;
     background-position: center !important;
  }
}

I am having the same problem.

Where should I add that code and what does it do?

@mboesen,
i was also a Little bit disappointed by Vlads Response. As i am not a coding expert i simply was’nt able to check out his proposed solution having no idea how to
-find the path or Location where to set that code
-nor even to estimate whether i should replace which lines by his ones
-or where to paste them as additional ones.
So at the end i didn’t touch it in between for now over a half year and also didn’t proceed with the project respectively didn’t promote it.

I think launching themes or templates for free offering support which also have Upgrades to buy is not very encouraging when the offered support is given in such a fragmented mannor.

If they don’t give us a more precise ‘how to’ leading with step by step descriptions to a solution we would have to look for wordpress-providers with better running themes or at least a more precise/useful support.

Friend told me something about enfold by krisie. But at the Moment as this project in Sydney took too much energy to begin with a new theme of any Kind.

If this result is a really good Marketing Strategy? Probably to ‘nerds’ whose passion is coding. But as wp includes the promise to alleviate sitebuilding to non-coding-experts i think it’s contradictional. With this experience at least i am far away of buying the non gratuit Version of Sydney or any other from atheme - sorry guys!

Hello Franky and mboesen,

you can create a Child Theme (or download the one for Sydney in our documentation).
Furthermore and the easier way would be to install a plugin like Simple Custom CSS and to put the code in it. Both ways are update-safe. This means, that your changes wont disappear when you update the theme. If you do your changes in the style.css of the main theme (the directory you downloaded and installed), your code will get lost at your next update.

I don’t see any support in “fragmented mannor”. Many theme-providers offer there support only if you bought the theme. You musn’t forget, that this is all for free here. Even the themes are all free. The pro versions were really cool and have got some new features, but the fact that Sydney is downloaded more than 1.000 times nearly each day speaks for itself.

I can truely understand your problem that non-coders often don’t really know where to put the code in but you can feel free to ask for it. We do have many supporters like me being happy to help you with your website. But we can do help only, if there are questions. Normally we write to every code to put it in a child theme or css plugin, but in case we do not you can ask for it.

So in case that you have any more question, we’re here for that :slight_smile:

Best regards,
WeAreOne

Hey WeAreOne

I was trying to figure what the code was suppose to do and exactly where to put it, so I don’t mess up the site.

I really do appreciate the free theme and the support we get even though.

I am happy with my site, also being my very first wordpress website and I really do like the Sydney theme even though I still have a few questions and fixes here and there that I need to take care of.

I already have the TJ Custom CSS plugin installed. So what I can understand is that I should just copy/paste the code into that and then it will work?!

Again I am not quite sure what the code is exactly doing???

I have notised that my problem with the slider images occur when the mobile device is Vertical.

I have also notised that this site http://danidiamond.com/ apparently have different pictures whether the device is horisontal or vertical. Will that be possible to implement in Sydney theme maybe at a later update.

Thanks for your time

Best Regards

Michael Barrett Boesen
www.boesenfoto.dk

PS just tried to copy in the code and check on my mobile phone… no change… But I am assuming that the code was especially regarding Frankys problem

Hello mboesen,

the code fixes the background in the center (vertical and horizontal). You may also check this: bg-position and bg-attachment. This site is really helpful by learning something about CSS and other code-stuff.

I was happy building my first website with Sydney too :slight_smile: It was great!

I don’t know the plugin exactly, but normally you should be able to go into the plugin section from the custom css plugin and paste the code in it. It should work, yes.

I checked your link and this website doesn’t seem to have different pictures in mobile-portrait or mobile-landscape mode, but it does have indeed different images for the mobile version. Maybe it’s a feature in the slider the theme is using. You can try “Slider Revolution” instead of our theme slider, maybe it has the feature.
I don’t know whether it will come in an update - I guess Vlad and the other have to decide this. With some css-tricks you could have different slider images for mobile versions. This could be done with Media Queries, to set different background-images for different viewport sizes.

I just took a look at your website and the slider images on mobile. Sure, it’s not the best, but sometimes you can’t make it perfect to every viewport. And your images didn’t look ugly at all. It’s important that everything is readable, that the menu is responsive and something like this - sometimes you have to make a cut with the responsiveness I think.

Maybe try to reduce the slider height for mobile versions. Look at this topics to get the code:

https://athemes.com/forums/topic/mobile-version-slider/
https://athemes.com/forums/topic/sydney-theme-problems/
https://athemes.com/forums/topic/slider-images-not-resized-for-iphone6plus/

Best regards,
WeAreOne

Hello WeAreOne

Thank you so much for taking your time to look at my site. And I followed your links and found a solution. Thanks!!

I was actually ok with the crop as you mentioned. It looked ok. But now I leave it with the full size… I like that too :wink:

Now I am left with a pretty annoying problem and I know I shouldn’t share in here, but I mention it, since I am guessing you might have solution :wink:

When sharing my link at FB, then “preview” of the site is an “man on the couch” that is a suggested header image that comes with the theme, but I don’t use.

After some search I am left with this being the problem… see link Scroll to “When shared, this is what will be included”

fb:app_id ERROR

I want it to show soemthing actually on my site.

Guess I need to set the FB app id, but have no clue where

Thanks again

Michael

Hello Michael,

great that you found a solution for that!

But I’m sorry, I can’t help you with your facebook image. I’m not really used to facebook and don’t have any idea why it’s taking this image. I just tried to set a featured image for my website and post the link then, but it didn’t changed anything - I had just a blank image because I deleted the “man-on-the-couch-image”.

Best regards,
WeAreOne

Thanks WeAreOne

The funny thing is that “the man on the couch” does not even exist in my media library.

I am sure it will be solved somehow

Thanks

Michael

You’re welcome Michael!

If I somehow find a solution I will try to inform you.