Docs

[hipbluesofa]

Hi there. I have several pages with images that I believe look awesome on my website http://hipbluesofa.com but when I view on mobile of any kind the images are cut off. I saw some reference to changing to % instead of PX but can’t figure it out – I am a newbie. Please help. What do I need provide for help from you guys? Let me know and thanks so much!!!

[Lely]

Hi There,

Are you referring to the background image on the first section? If yes, please add this on Settings Tab > Custom CSS:

@media (max-width: 979px){
div#x-section-1 {
    background-size: contain !important;
}
}

If you’re referring to the guy background image on section 6, we need to use different background image for mobile screen. As the screen size gets smaller the content of the section stacked up. In this case, we need vertical background image to cover the entire section content. You may this CSS to define different background for smaller screen size:

@media (max-width: 979px){
div#x-section-6 {
    background-image: url(http://www.hipbluesofa.com/wp-content/uploads/2016/04/nerdy-guy.jpg);
}
}

Change the background image URL.

HOpe this helps.

[hipbluesofa]

Awesome. Thanks!

[Joao]

You are welcome.

Let us know if we can help you with anything else.

Joao

[Author]

Posts