Streaming live at 10am (PST)

Cancel responsiveness?

Hi guys :grin:

I have a section with many images (I’m going to use parallax), when I shrink the screen all the images are coming to the center and it looks bad, instead I want for it to simply be cut by the screen (cancel responsiveness?)

Thanks for your help!
Avi Whol

Here is my site Read-Only:

Do this. Though it will look kinda empty on mobiles, and you will need to modify images’ positions for different breakpoints anyway.

Thanks for your help @dram, it works but now on smaller screen there’s an horizontal scroll…
Do you have any tip for that? :slight_smile:

Yes. Make sure your parent element for the wireframes has overflow:hidden set

Yea it’s already on, I think it’s because I put 1600px for the section…

No, it is not on because you don’t have a parent to put overflow:hidden on, sorry didn’t notice your sections are without parents.

Just put a div inside your wireframes sections, style it like your wireframes section currently is and remove the min width from the wireframes itself

Hi @dram probably I’ve missed something, I put a div inside the section and now the images are coming to the center as before :sweat_smile:

But apply to this new div inside a section. Section itself (wireframes) should not have this code after all.

edit: and don’t forget to set overflow:hidden on the section!

Did what you said, still in small screens the images are coming to the center…

Right. Give your div inside the wireframes section position: absolute and height: 100%. This should do it.

Wow! it worked:open_mouth:
Thanks for you help and patient :relaxed: but now I wondering why it worked… could you explain it to me? Why did I put a div inside the section? why 1600px? and why now the images are not moving?
I really appreciate your help.

That’s the spirit! Knowing whys is the best way!

So anyway, the method to keep things not scale down (as you wanted it to be - just cut from one side or another) is to give them some size that will not decrease (hence we put in 1600px - but that could be any number at which you think your element looks the way it should - at the same time you set minimum width of 100% to ensure that this element is always at least the size of a browser width preventing it from being too narrow on wider screens).

Now if this element is larger that our browser window width it will create a horizontal scrollbar. To avoid this we usually set overflow: hidden on the parent element.

But the element you needed to keep larger that browser width was a top level section so there was no parent to give it the overflow: hidden property (aside from the body, but that would be a bad idea). That is why we had to create yet another div inside, style it to keep it wide and take 100% of its container, and then gave the overflow setting to its parent (that’s our section!).

1 Like

Hmmm, ok I think I got it!

I really appreciate your time and effort, thanks :pray: