www.wysiwygwebbuilder.com

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.

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.

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

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.

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.

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.

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.

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

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?

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

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 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?

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?

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?

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

I think whatsmyviewport.com is reported the wrong information.
Your breakpoints work correct.

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.

@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.

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

Thanks

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.