Responsive Website at different breakpoints
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
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
Responsive Website at different breakpoints
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.
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.
Re: Responsive Website at different breakpoints
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.
A common reason for the layout not being flexible is incorrect flexbox properties. For example, that element do not grow or shrink.
Re: Responsive Website at different breakpoints
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
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
Re: Responsive Website at different breakpoints
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.
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.
Re: Responsive Website at different breakpoints
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.
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.
Re: Responsive Website at different breakpoints
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.
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.
You should receive the response immediately. If not, then the email probably ended up in your spam.btw I sent an order request to upgrade to v15 from v14 did you receive it.
Re: Responsive Website at different breakpoints
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.
Re: Responsive Website at different breakpoints
You can mix layout grids and flexgird on the same page, but I do not recommend to nest them.
Re: Responsive Website at different breakpoints
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?
Re: Responsive Website at different breakpoints
Using 'cover' should work. Just make sure the image has the correct aspect ratio.
Re: Responsive Website at different breakpoints
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.
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.
Re: Responsive Website at different breakpoints
- 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?
- what are the IDs of the objects that are causing the problem and what do I need to do to see this behavior?
Re: Responsive Website at different breakpoints
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?
Re: Responsive Website at different breakpoints
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?
Are you sure the viewport of your device is smaller than 480 pixels?
Re: Responsive Website at different breakpoints
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
Re: Responsive Website at different breakpoints
I think whatsmyviewport.com is reported the wrong information.
Your breakpoints work correct.
Your breakpoints work correct.
Re: Responsive Website at different breakpoints
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.
Re: Responsive Website at different breakpoints
@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.
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.
Re: Responsive Website at different breakpoints
@Crispy I have sent you an email, if you could have a sneak look that would be great.
Thanks
Thanks
Re: Responsive Website at different breakpoints
Correct. That is how it works, also with your project.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)?