Hi there,
I have just discovered that the full width images I am using on my home page are not responsive, that is when viewed on a phone screen for example the image gets chopped in half. I am hoping there is a way to make these images work so they work on all screen sizes.
Hoping for a solution.
Many thanks
Hi Kylie
Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
Hi Andrew
Site is healthykinect.net
Thanks.
The behaviour you’re seeing is expected from the markup being used:
What you see is normal for how background-size: cover works.
The above will give you the result you’re looking for. But, now you’ll need to also introduce:
Next you’ll find there is a big space that’s not being used. That’s because of markup like below which isn’t responsive:
You’d need to do something like this instead:
Then at Appearance > Custom CSS:
@media (min-width: 680px) {.650-spacer {display:block;clear:both;height: 0px;padding-top: 650px;}}Thanks Andrew,
I have to say Im a little lost with the above code – where does this relate to – that is where does this code sit? Im sorry to be a pain but are you able to explain a little bit further what needs to go where etc…
Thanks heaps
Kylie
No problem. All of the code above is inline in your widgets. Was there perhaps someone else involved in the website build?
Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:
[email protected]
Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
This is a private message.
Hi Andrew,
This is a private message.
You were using a shortcode for the spacer in the first widget on the home page. I’ve changed that to a manual spacer:
Which I’ve targetted at Appearance > Custom CSS so we can drop the space for mobile.
Background size “cover” is coming from row settings in the same place you set the background image. I’ll try use Custom CSS quickly to change that to 100% so you can see the difference in methods.
Break down of steps taken:
1. First Visual Editor widget on home page edited. Changed shortcode spacer with custom spacer which looks like this:
2. Editing the row, click Attributes, added a row class in the first field:
3. Added the following at Appearance > Custom CSS to target the above classes (x2):
/* Custom Spacer */ @media screen and (min-width: 1480px) { .spacer { display: block; clear: both; height: 0; padding-top: 650px; } } /* 100% width background images */ .percent-100-bg .so-panel > div[style] { background-repeat: no-repeat; background-size: 100% !important; }The above does:
1. Makes our spacer stop adding space below 1480px resolution.
2. Changes the background image size from “cover” to 100%. You originally set the background image size when adding the background image by editing the Visual Editor widget and clicking Design on the right.
You can just pretend we started our discussion here and ignore all that came before :)
I’ve tried one last thing to improve this. I’ve changed the spacer to the following:
.spacer { display: block; clear: both; height: 0; padding-top: 50%; }Making the padding a percentage. It helps a bit.
Thanks Andrew
I don't understand it all but that's ok! Really appreciate the help.
Kylie
For sure :)
Hi Andrew,
I have changed the masthead background colour many times and hit saved and publish but when I go back to view site it hasn't changed. Not sure why – successfully changed menu colour etc…
Site is healthykinect.net
Hi Kylie
Your masthead background color is being set at the top of your Custom CSS:
#masthead.site-header { color: #52728e; background-color: #475e6d; }Which rule are you editing? Which color are you trying to change it to?
Ok, I will try editing in there I was changing in Customise – it changed in customise screen but didn't carry over to site view.
If you’d like to use the Customizer for this change then ideally, remove the Custom CSS rule.
Cool, thanks for your help :-)
Glad we could assist. All the best :)