Page 1 of 1

breakpoints

Posted: Mon Aug 26, 2024 1:00 am
by miodrag
im using layer with relative hotizontal sizing and two images in the layer, but i want to add breakpoint to change the view.The problem is when i preview in the browser when i scale down resolutions layer overlaps in size , but when is only the default view without breakpoint everything is ok.
here link of small demo project
https://www.mediafire.com/folder/o5vz5e ... New+folder

Re: breakpoints

Posted: Mon Aug 26, 2024 1:28 am
by crispy68
What do you mean by the 'layer overlaps in size'? Keep in mind, you are using fixed position images in the layer. The images will stay where they are until the 480px breakpoint is reached and then will reposition and stay at their new position. For example, around 680px, the right image is off the screen and a horizontal scrollbar appears. This is because the image is using fixed positioning and is now outside of the browser width.

Since you set the layer to 'relative horizontal sizing', it will resize to the size of the browser window width.

Without knowing what you ultimately want it to look like, it's hard to say which direction to go. However, if you want it to be responsive, then I would suggest using layout grids, flex grid or flex containers as it is much easier. Layers are not the best option for creating totally responsive web pages.

Re: breakpoints

Posted: Mon Aug 26, 2024 1:54 am
by miodrag
thank you for your response , but can you check this and resize it?
https://www.mediafire.com/folder/o1bzmz ... New+folder
anyway i work with layout grids also , but this time i wanted to work with layers

Re: breakpoints

Posted: Mon Aug 26, 2024 2:00 am
by crispy68
It's behaving the same as the first one.

Re: breakpoints

Posted: Mon Aug 26, 2024 2:02 am
by miodrag
in the second link when i resize it in the preview , its scaling down without horizontal scroll , images stay in the layer

Re: breakpoints

Posted: Mon Aug 26, 2024 2:04 am
by crispy68
If you are using the built in responsive view of the browser, what you are seeing is not correct. The layer and images will not scale as they are fixed positioning. This is evident if you simply reduce the size of the browser in normal view. Objects inside a layer are fixed position.

You will need to add breakpoints and adjust the positioning of objects in a layer so they look correct in each breakpoint. Also, you will want to change your settings in 'manage breakpoints' to use 'activate breakpoints when browser window is larger than the device width' for better results when adding breakpoints.

Re: breakpoints

Posted: Mon Aug 26, 2024 2:08 am
by miodrag
thank you again for your precise answers :) i now understand :)