Header Not Responsive on Mobile Devices

  • Resolved charique

    (@charique)


    6 years ago

    I have a header for my client’s website. The bottom portion of the header image is a headshot collage of the staff (13 total). However, only 3 headshots show on the mobile view and 5 show on the tablet view.

    Is there a way for the entire bottom row to be visible on all devices? See here, https://recordit.co/QrE9QCH5xa.

    As you can see, the top image adjusts to the screen size but not the bottom portion. Note: The are two different sections, not one image.

    The page I need help with https://recordit.co/QrE9QCH5xa

    • This topic was modified 6 years ago by charique.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Is the collage a background image? How do you have the Size set? Usually setting it to Cover works best, but make sure you click on the Device icon next to Size (in the section’s Style tab) to set the Size there. It’s highly unlikely though that an image like that will show up very well on a small screen. Each headshot would be way too small to look nice, so you may want to choose a different image for mobile devices. This post – https://elementor.com/blog/responsive-image-background/ – gives details on all the different ways you can control background image sizing.

    Thread Starter charique

    (@charique)

    I figured it out. They want to see all 13 and be able to zoom in on each image. Personally, I agree with you but you know “the customer is always right.”

    Thanks for your help!

    Glad you figured it out!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header Not Responsive on Mobile Devices’ is closed to new replies.