▼
Streaming live at 10am (PST)

Responsive Problems in my site

#1

Hi, I'm having some problems with the site responsiveness.
I check my site in high res monitors, 2k and up ... and my grid didn't stay centred.
If you have an HD monitor or less it will work just fine, but in higher resolutions in gets messed up
you can check my site here : eladadir.webflow.io
and here : https://preview.webflow.com/preview/eladadir?preview=2d51de1051ef7be65413ec71b68b0ca1
Here are screenshots that shows the problem :
Bad(Higher Res Screens) :

Screen Shot 2016-07-24 at 19.16.14.png1680x932 1.51 MB

Good:
Screen Shot 2016-07-24 at 19.16.00.png1679x931 1.79 MB

#2

What browser and browser version are you using where it is not working?

#3

Your img tag have a max-width: 100% and your images are 400x400

1.- You can remove the max-width and add 100% width to let the images fill the available space but they will look bad on high-res monitors.

2.- Use a bigger images (800x800) and activate the HiDPI option

#4

I check it on Chrome Version 51.0.2704.106 (64-bit)

#5

I Tried that, but it won't center ...

#6

After two days of trying everything .... can't figure it out yet ... Someone ? Help ?

#7

I would suggest using VW/VH for what you would like to accomplish.

#8

You can use your images like backgrounds with background-size: cover for their divs.

#9

Yup VH works better, but I can't figure out how to set the grid to be 5X5 at all times .?

#10

To have it be the same size in all browsers always here is a little trick: set all the elements to a certain VW width. After that set their height to the same VW value you gave to width. This way they will always be square and the same size.

Hope this helps.

closed #11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.