Responsive Website at different breakpoints

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
lpug
 
 
Posts: 120
Joined: Thu Apr 05, 2018 10:15 am

Responsive Website at different breakpoints

Post by lpug » Thu Jan 09, 2020 11:32 am

Hi again,

Is there any tricks that could help me out, I've just finished one page of getting site looking great at the nominated break points of default 1200,768, 480 and 320, published it and on my samsung at 412 viewpoint it looks crap. If i then add that breakpoint I can see that it doesnt look right. How many breakpoints are required. I predominately have used layout and flex grids, aren't these suppose to be responsive.

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

Re: Responsive Website at different breakpoints

Post by Pablo » Thu Jan 09, 2020 12:14 pm

For flexgrids you usually do not need many breakpoints because the layout is flexible (if implemented correctly).
A common reason for the layout not being flexible is incorrect flexbox properties. For example, that element do not grow or shrink.

lpug
 
 
Posts: 120
Joined: Thu Apr 05, 2018 10:15 am

Re: Responsive Website at different breakpoints

Post by lpug » Thu Jan 09, 2020 12:27 pm

Pablo are you able to check whether I'm on the right track, its the first time that of used a combination of layers, flex and layout grids.

https://www.dropbox.com/s/0nxktfyu2zs6w ... k.zip?dl=0

I've read and looked at so many examples, I thought I was doing ok.

Thanks in advance

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

Re: Responsive Website at different breakpoints

Post by Pablo » Thu Jan 09, 2020 1:09 pm

Everything looks correct, as far as I can tell.
Just keep in mind that the content of layer is fixed/absolute (not flexible), so you will have to adjust the layout for each breakpoint manfully to make sure everything fits inside the viewport.

lpug
 
 
Posts: 120
Joined: Thu Apr 05, 2018 10:15 am

Re: Responsive Website at different breakpoints

Post by lpug » Fri Jan 10, 2020 6:25 am

Thanks for checking, at the breakpoints that I worked on all appear to be ok. However on my mobile with a viewport of 412 (Samsung note 9) its all over the place...how to you manage this, how do the wordpress themes manage it so well?
Last question when we talk about responsive are we also referring to landscape mode? if so its even worse with my page.

So sorry for many questions I have gone through all the tutorials I could find.....btw I sent an order request to upgrade to v15 from v14 did you receive it.

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

Re: Responsive Website at different breakpoints

Post by Pablo » Fri Jan 10, 2020 7:22 am

Maybe the Samsung browser does not support flexgrid?
Flexgrid is a relative new HTML functionality, so it may not be supported by all browsers.
https://caniuse.com/#feat=css-grid

If you also want to support older devices then Layout Grids are a safer choice.
btw I sent an order request to upgrade to v15 from v14 did you receive it.
You should receive the response immediately. If not, then the email probably ended up in your spam.

lpug
 
 
Posts: 120
Joined: Thu Apr 05, 2018 10:15 am

Re: Responsive Website at different breakpoints

Post by lpug » Sun Jan 12, 2020 10:18 am

Thanks Pablo, just upgraded to V15.....back to grids, is there anything wrong in mixing flex and layout grids, i.e. nesting a layout grid inside a flex grid? or is that pointless.

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

Re: Responsive Website at different breakpoints

Post by Pablo » Sun Jan 12, 2020 10:24 am

You can mix layout grids and flexgird on the same page, but I do not recommend to nest them.

lpug
 
 
Posts: 120
Joined: Thu Apr 05, 2018 10:15 am

Re: Responsive Website at different breakpoints

Post by lpug » Sun Jan 12, 2020 11:11 am

Pablo what do you recommend....you suggested that in my project I had a fixed layer and had to adjust this at all breakpoints....I have done this and its not quite right.....I'm trying to replace it with a layout or flex grid...I want a image in the layout grid then overlay a header in the centre of it (should be simple). If I put my image as a background and select cover, the image is huge and looks terrible, however it gives me the ability to overlay text in the centre by using the padding. If I drop an image in the grid then I cannot overlay a header in the same grid...the new grid snaps at the bottom of the image. I believe this is how its suppose to work.....how do people do it?

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

Re: Responsive Website at different breakpoints

Post by Pablo » Sun Jan 12, 2020 11:32 am

Using 'cover' should work. Just make sure the image has the correct aspect ratio.

lpug
 
 
Posts: 120
Joined: Thu Apr 05, 2018 10:15 am

Re: Responsive Website at different breakpoints

Post by lpug » Mon Jan 27, 2020 10:28 am

So sorry to bring this up again, Ive started my project from scratch and checking each page and modification as I go along...I'm predominately using layout grids and the occasional flexgrid when I require more flexibility.

I've created one page with 3 layout grids ....one layout grid has 2 layout grids nested, only one layer nested as per FAQ.

I have 5 breakpoints 1200, 768,640,480,320 (I think its way too many) at 480 and 320 I have made a couple of objects invisible in the sticker layer.
However when I view it on my samsung with a viewport of 411 those 2 objects are visible, I would of thought if they are hidden at 480 and 320 then 411 is in between and they should also be hidden.

Here is my project....disregard the master page I'm not using that yet

https://www.dropbox.com/s/epp0zxn508px5 ... w.zip?dl=0

What am I doing wrong...really frustrating.

Thanks in advance.

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

Re: Responsive Website at different breakpoints

Post by Pablo » Mon Jan 27, 2020 12:17 pm

- I do not see any layers or sticky layers in your project. Did you mean layout grids?
- what are the IDs of the objects that are causing the problem and what do I need to do to see this behavior?

lpug
 
 
Posts: 120
Joined: Thu Apr 05, 2018 10:15 am

Re: Responsive Website at different breakpoints

Post by lpug » Mon Jan 27, 2020 1:05 pm

Yes sorry Pablo, layout grids one is set as a sticky layer. The objects are the awesome icons the calendar and the shopping bag. I have made the shopping bag invisible at breakpoints 480 and 320. However when i view them on my phone with a viewport of 411 i see the bag icon. Shouldn't it also be invisible on viewport 411 because it's set to invisible on breakpoints 480 and 320?

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

Re: Responsive Website at different breakpoints

Post by Pablo » Mon Jan 27, 2020 1:26 pm

For me, the shopping bag is invisible at the 480 and 320 breakpoints.
Are you sure the viewport of your device is smaller than 480 pixels?

lpug
 
 
Posts: 120
Joined: Thu Apr 05, 2018 10:15 am

Re: Responsive Website at different breakpoints

Post by lpug » Mon Jan 27, 2020 1:48 pm

Really on both headers the black one and the white one? Did you view it on phone or desktop? On my desktop it's fine admittantly the smallest viewport is 500, my phone says 411 when going to site whatsmyviewport.com

Post Reply