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

Responsive Website at different breakpoints

Post by lpug »

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: 21582
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Website at different breakpoints

Post by Pablo »

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

Re: Responsive Website at different breakpoints

Post by lpug »

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: 21582
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Website at different breakpoints

Post by Pablo »

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

Re: Responsive Website at different breakpoints

Post by lpug »

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: 21582
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Website at different breakpoints

Post by Pablo »

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

Re: Responsive Website at different breakpoints

Post by lpug »

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: 21582
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Website at different breakpoints

Post by Pablo »

You can mix layout grids and flexgird on the same page, but I do not recommend to nest them.
lpug
 
 
Posts: 111
Joined: Thu Apr 05, 2018 10:15 am

Re: Responsive Website at different breakpoints

Post by lpug »

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: 21582
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Website at different breakpoints

Post by Pablo »

Using 'cover' should work. Just make sure the image has the correct aspect ratio.
lpug
 
 
Posts: 111
Joined: Thu Apr 05, 2018 10:15 am

Re: Responsive Website at different breakpoints

Post by lpug »

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: 21582
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Website at different breakpoints

Post by Pablo »

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

Re: Responsive Website at different breakpoints

Post by lpug »

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: 21582
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Website at different breakpoints

Post by Pablo »

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

Re: Responsive Website at different breakpoints

Post by lpug »

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
User avatar
Pablo
 
Posts: 21582
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Website at different breakpoints

Post by Pablo »

I think whatsmyviewport.com is reported the wrong information.
Your breakpoints work correct.
lpug
 
 
Posts: 111
Joined: Thu Apr 05, 2018 10:15 am

Re: Responsive Website at different breakpoints

Post by lpug »

Pablo can you please clear up my question......if an object(s) are invisible (hidden) at break points i.e. 320px & 480px does it mean that any viewports between 320px-480px they will also be invisible (hidden)? if so then I'm not sure whats wrong because this is not the case.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Responsive Website at different breakpoints

Post by crispy68 »

@Ipug

What Samsung phone are you using? I downloaded your project and uploaded it here and checked it on my Samsung Galaxy 7. It looks correct for me.

In your project, if the viewport width is 480px or below, the shopping bag is hidden. So anyone viewing your site on a device where the viewport width is 480px or below will not see the shopping bag. If you are seeing the shopping bag, then your viewport width is 480px or greater.

I personally like to use the option: Activate breakpoints when browser window is larger than the device width. This will add min-width and max-width to the breakpoints. I find this much better to design with. I would also suggest getting rid of the 640 bp as it is not really needed and would set the layout grids to use flexbox over css grid as it is more acceptable as you will have similar control.

If confused, reach out to me via email at ron@wizbangwebdesign.com and I can send over an updated version of your demo.
lpug
 
 
Posts: 111
Joined: Thu Apr 05, 2018 10:15 am

Re: Responsive Website at different breakpoints

Post by lpug »

@Crispy I have sent you an email, if you could have a sneak look that would be great.

Thanks
User avatar
Pablo
 
Posts: 21582
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Website at different breakpoints

Post by Pablo »

If an object(s) are invisible (hidden) at break points i.e. 320px & 480px does it mean that any viewports between 320px-480px they will also be invisible (hidden)?
Correct. That is how it works, also with your project.
Post Reply