Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • June 24, 2016 at 4:16 am #652794
    soulmatesanimalsociety

    Hi Everyone,

    I have a colour section at the top of most of my pages, but when I look at the site through my phone (or smaller devices in general), while everything else responds really nicely, the colour sections don’t and I’m generally left seeing a corner of the image (and the image doesn’t really make any sense).

    Any ideas how to fix this?

    June 27, 2016 at 8:40 am #653702
    Rikard

    Hi,

    Displaying background images the same on all types of screens is more or less impossible unfortunately due to the different dimensions of screens, one option you could try would be to create a second section which will only show for mobile devices, and use an image better adapted to small screens. You can then use CSS like this to hide/show the correct section, remember to give you sections unique ID’s in the element option and replace the names after the hash sign in the code: 

    @media only screen and (max-width: 767px) {
#desktop-section {
display:none !important;
}
}

@media only screen and (min-width: 768px) {
#mobile-section {
display:none !important;
}
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.