Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1010453

    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.banner 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

    #1010470

    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

    #1010479

    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):

    Screenshot

    Also on this page:

    Is there a way to reduce the white space in these two places? Thank you!

    #1010588

    Hi,

    That’s how the css is supposed to work. You can add this css code inside the existing css media query to reduce the gap between the “banner-mobile” section and the content below.

    #banner-mobile + div {
        top: -50px !important;
    }

    Best regards,
    Ismael

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