CODEWITHSUNDEEP
htmlcssresponsive-design
begdev
begdev

Reputation: 35

Mobile view - images resize and overlap section below

Codepen - https://codepen.io/spaOyst_/pen/bGWagKG

I am attempting to rebuild a site by going mobile-first but I am struggling with what I think is the responsiveness/resizing of the images or the other sections not resizing when browser width is increased, but the images grow quite large and overlap the section below.

I have tried adjusting the width and height of the images, anchor tags and the section below the images

If anybody has any ideas of what the cause would be, I would really appreciate the help.

Upvotes: 0

Views: 187

Answers (1)

David Taiaroa
David Taiaroa

Reputation: 25475

At line 246 of your CSS, you've set the height of the lightbox section to 700px and this non-responsive height is causing problems at viewport widths of about 490 - 760px.

It isn't clear to me why you even need to see the height of this lightbox section, but if it's necessary, what about adding an extra breakpoint?

@media (max-width: 490px) {
  .lightbox-section {
        height: 700px;
    }
}  



@media (max-width: 760px) {  
 ...  

   .lightbox-section {
        padding: 63px 10px;
       /* height: 700px; */ Either comment this out or adjust as needed
        text-align: center;
    }
   ...

   }

https://codepen.io/panchroma/pen/QWvaMEd

I can see that you've set a pixel height for the index-services section as well but the image links are broken so I can't see if there's an issue in this section as well or not.

Upvotes: 1

Related Questions