-
I have read everything on here about breakpoint issues. Mine is very simple. I do not understand code-level explanations, but in reading it seems that GB has set non customizable breakpoints, such as:
‘largeWidth’ => ‘@media (min-width:1200px)’, //desktop
‘mediumWidth’ => ‘@media (max-width:1199px) and (min-width:499px)’, //tablet
‘mediumSmallWidth’ => ‘@media (max-width:1199px)’, //tablet & mobile
‘mediumLargeWidth’ => ‘@media (min-width:500px)’, // tablet & desktop
‘smallWidth’ => ‘@media (max-width:499px)’which I copied from one of your responses to others. Are these the baked in breakpoints that we can’t customize?
I’m trying to figure out if I can adjust the breakpoint between desktop and tablet so I have three vertical columns (containing images and text) on the tablet just like the desktop. Right now the three columns stack on an iPad and they look awful.
There should be three columns visible, and not stacked with the menu logo forced to be centered.
I don’t even know if the breakpoint is the problem, I just want it to look the same on a horizontally (landscape view) held iPad as on a giant desktop.
Is this possible and can there be or is there a solution that doesn’t require a big blob of code that I don’t understand?
Please and thank you.
Carol Jones
-
Hi there,
The default breakpoint is customizable, but there are a few caveats. Currently, modifying the breakpoint value requires a custom snippet, which I’ve outlined here.
Also, changing this will not affect existing styles using the current defaults—it only updates the defaults in the UI. It’s best to add this filter before you start building.
-
More to my point though, perhaps my issue is not the breakpoints, but the styling of generate blocks in the Element itself (“Blog page hero”) maybe the flex block or flex child settings or, flex basis, flex grow; or the grid block layout settings like the horizontal alignment, for instance.
I have no idea how to use the snippet about breakpoints you sent, and because it won’t affect existing styles, it won’t be helpful for my issue. This site is already built.
I just want the three vertical columns to align horizontally on the landscape iPad view, just like the desktop view, and not stack. It is on the only element that I use for the opening page on http://www.mainefiberarts.org.
Thanks for trying to explain this all to me. It is way beyond what I understand.
Carol
-
Try adding this CSS to customizer > additional css.
@media(min-width:768px) { .home .gb-grid-wrapper.hero-posts.gb-query-loop-wrapper { flex-wrap: nowrap; } } -
Thank you for this. Didn’t seem to make any difference, plus there was already lots of code already there that either came in with the element or was added in response to other issues I had when I was first using this template/theme. I don’t remember being involved in their origin.
So I switched out .home and used .site-main instead because I saw that it had been used before, but no difference so I used .front-page because I saw that was used somewhere, also no difference. I wondered if your little snippet should be in the .css higher up in the order and moved it up. I don’t know what has or hasn’t made a difference.
Is it possible in this additional .css that these individually added snippets could be overriding each other? I don’t see where or if I should look. I’m assuming if nothing is happening they are being ignored.
I was able to get the iPad opening page to show three columns, but they were cut off at top and bottom and made smaller overall and looked even worse than ever.
Any other ideas? Am I just stuck with it staying how it is?
Thank you for taking the time.
Carol
-
Ying’s CSS is functional, but there are syntax errors in your existing CSS that prevent subsequent rules from being applied. When a parsing error occurs, WordPress stops processing the remaining CSS.
The issue lies in the
@media (min-width: 1024px) {rule, which is not properly closed. The last selector inside this media query isbody.paged .site-main, but a closing brace}is missing before the end comment, causing a parsing failure.I’ve already fixed that for you, and everything should be working now. Can you check if the tablet layout now meets your requirements?
-
Hi Alvind,
Thank you for fixing the .css. I probably messed it up when I was cutting and pasting over the past many months. You must have fixed it last night because I saw three columns showing pretty late in the night (I thought but wasn’t sure if I was just dreaming). I am very happy and thankful to see the three columns and no stacking on the iPad. However…(of course) there is a slight weirdness.
The page or part of the page with the three columns is cut off so the three columns are not vertical but are forced to be shorter. Is that something that the .css can fix? If so, how? Something to make the three images above continue to get longer and not just cut themselves off when they realize that the viewing area has gotten relatively shorter.
You can log in and see this private page I made just for you:
Sorry I can’t figure out how to do this to keep the image out of the normal stuff, but I made two images to demonstrate what is wrong that I hope you can fix. The part I’m sorry about is that you have to be logged in with the credentials you have for my site.
Thanks again very much because it is basically fixed.
(mainefiberarts.org/layout-issue)
-
Let’s see if we can fix the container height first. Try adding this CSS:
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { .gb-container-d4c16cc5 { height: 800px; } } -
Well, I think this is pretty good. I only have one iPad and I know I can’t guarantee that what everyone sees is exactly what I see. When I play with this on the monitor screen (high res monitor) I can get it to stay the way I want it once I get the three columns showing.
On my iPad if I hit command>zero key, I have to hit the command(control)> with the minus key to make it perfect. I fiddled around with the 800px value from 700px to 1000px and that doesn’t seem to change anything drastically or definitely.
When I hit the logo at the top left when I’m on another page, it does go back to this opening “page” (it really isn’t a page but it’s what I settled for long ago) it looks good on both my computer and iPad. On my lower res monitor it looks good too.
Thank you for sticking with me on this. I can live with it quite nicely. I’m sure I will have more questions because the more I learn the stupider I get. I will give you a rest for now if I dare.
xoxoxoxoxoxox
Carol -
No problem, just reach out if you have any further question! 🙂
- You must be logged in to reply to this topic.