Hi there!
I am so close to finalizing my website but I have one more question!
I have banners throughout my site that are set to display at 50% of the window height, however, I would like to adjust this for mobile. I would like the banners to show the full width of the image so that they are not cut off on mobile.
Click here to see the current problem — the man in the photo is cut off..
It is happening throughout the site on mobile: http://www.wonderlandbridal.com
Is there an ID I should add to all the color sections along with some custom CSS for mobile? Any help here would be appreciated!
Thank you!
Brianne
Hey Brianne,
Try to use one of these codes and check which you prefer:
@media only screen and (max-width:767px) {
#top #banner-mobile {
background-position: top right!important;
}
}
@media only screen and (max-width:767px) {
#top #banner-mobile {
background-size: 100% auto !important;
max-height: 35vh;
}
}
Don’t use both at the same time.
Hope this helps :)
Best regards,
Nikko
Hi Nikko,
You are a life saver! Thank you! It fixed the image, but it looked like it somehow created a big gap of white space on two pages (mobile only):
Also on this page:
Is there a way to reduce the white space in these two places? Thank you!