Breakpoints confusion - help

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
longman
 
 
Posts: 144
Joined: Sat May 19, 2018 1:23 pm

Breakpoints confusion - help

Post by longman » Wed May 23, 2018 8:33 am

Hi guys,

I have this header Flex container with two objects in it, I have give it 768 and 320 common breakpoints, however when I make the browser window smaller, but above 320, the breakpoint of 320 will be displayed, why? I have defined breakpoint for 320 but above 320 is still displayed.

I have attached my file https://expirebox.com/download/9a80d0a8 ... 73357.html

Here's also the screenshot, the browser window is not 320 width, but it displays my 320 breakpoint http://prntscr.com/jlhq22

User avatar
Pablo
 
Posts: 13052
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Breakpoints confusion - help

Post by Pablo » Wed May 23, 2018 9:05 am

This behavior is documented here:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
(When do I use 'Include min-width in CSS3 media queries'?)

longman
 
 
Posts: 144
Joined: Sat May 19, 2018 1:23 pm

Re: Breakpoints confusion - help

Post by longman » Wed May 23, 2018 9:31 am

I disabled it and now the problem is from the other side, when the browser window is 320, still 768 breakpoints is displayed.

I have attached the new test file https://expirebox.com/download/7fb6e661 ... 817b1.html

longman
 
 
Posts: 144
Joined: Sat May 19, 2018 1:23 pm

Re: Breakpoints confusion - help

Post by longman » Wed May 23, 2018 9:33 am

screeshot http://prntscr.com/jlikmx

the chrome window is 320, but 768 breakpoint is displayed. even i make it smaller to 310 or 300, still 768 breakpoint is displayed.

User avatar
Pablo
 
Posts: 13052
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Breakpoints confusion - help

Post by Pablo » Wed May 23, 2018 9:36 am

This is expected behavior.
Either the breakpoints is triggered on the start or the end of the specified value.

I think the main problem with your layout is that the objects have a fixed size. The elements are not flexible.

longman
 
 
Posts: 144
Joined: Sat May 19, 2018 1:23 pm

Re: Breakpoints confusion - help

Post by longman » Wed May 23, 2018 9:44 am

the objects are supposed to be images (logo and a banner), they meant to be fixed size.

User avatar
Pablo
 
Posts: 13052
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Breakpoints confusion - help

Post by Pablo » Wed May 23, 2018 9:46 am

Why are they fixed?
What did you expect to happen?

In the project you have shared, the image widths are 250 and 728
That means that at 978 the default layout will 'break' because the images no longer will fit on one row.
So, with these settings I would expect the breakpoint to be at 978 pixels, not at 768.

Normally with 'fixed' object the option 'Include min-width' should be enabled, so the content will never be clipped.

longman
 
 
Posts: 144
Joined: Sat May 19, 2018 1:23 pm

Re: Breakpoints confusion - help

Post by longman » Wed May 23, 2018 10:09 am

Right, i well-understood it now, thanks! Got it worked out )

Post Reply

Who is online

Users browsing this forum: lummis and 7 guests