Row Background on mobile


#1

Hey Vlad,

I noticed that on mobile/small browser widths the background for the row changes from cover to auto. I searched the forum and found another thread about that. I tried to change it myself to stay at cover since the image for my background is rather large, but I’m a newbie at css and such so couldn’t figure it out.

The background I’m talking about specifically is the one after the product video section that is yellow with the iPhone pic. On my desktop it looks great but on my phone the composition is very off. It also happens with the last background for the contact us section on my phone the background doesn’t reach down to the end of the section its cut off near the top part of the map leaving a huge white space until the footer.

Could you tell me what css code I can put in to set those to be cover on mobile instead of auto? Thanks


#2

Hey,

You can use this:


@media screen and (max-width: 1024px {
     .panel-row-style {
          background-size: cover !important;
     }
}


#3

That didn’t work for me it still looks the same.


#4

The code isn’t present on your website. You either didn’t add it right or you have a caching plugin which needs clearing.


#5

I have the code saved in the custom css plugin I’ve used to make all my other adjustments. With the custom css plugin I have it shows me live changes after I enter the code but with that code it doesn’t show any change. I also checked my plugins and I didn’t see anything that says it messes with the cache i.e. wp-supercache etc.


#6

My bad,


@media screen and (max-width: 1024px) {
     .panel-row-style {
          background-size: cover !important;
     }
}

There was a missing ) after 1024px.


#7

That did the trick. Thanks once again.


#8

I’m actually having another issue concerning this. I’ve since added a new row and put a background image for it but the new section doesn’t seem to cover like the other ones.

The new row is under the problem and solution bit.

By the way I’m using a bunch of empty text widgets to make the space to see those background pics. I’m guessing there’s a more efficient way of achieving that effect? When scrolling through the site those sections get pretty choppy.


#9

I figured out how to change the height of a row but the background image for that one section is still not working correctly on mobile/small browsers.


#10

All background images for the row work the same :slight_smile: So it’s not that it doesn’t work, it’s just that that image doesn’t really fit well as a background on small screens. It’s also huge. Why don’t you do it like you did for the The Beginning row?


#11

Ah ok guess I’ll have to experiment with that. I don’t want to use the same method for that I wanted that section to be different lol.