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?
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