-
Posts
-
Hey,
On my site, there is a row of three boxes, which on mobile should wrap to one column all with 100 %. This is not what happens however, as you can see. In addition, I’ve had to add this CSS to hack the blog posts grid to display correctly on mobile as well, as the second blog post box did not have a margin at the bottom on mobile:
@media only screen and (max-width: 767px){ .responsive #top #wrap_all .avia-content-slider-even .slide-entry.slide-parity-odd, .responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even { margin-bottom: 20px; margin-left: 0; } }What’s going on? This occurs even if I remove all extra CSS added in the child theme.
Thanks :)
Hi emilbroll,
Everything is wrapping as expected on my end, could you try to explain a bit further and/or post a screenshot of the issue please?
Regards,
RikardHey RIkard, did you look at the whole page? I have a blog post grid at the top, and that works pretty much as expected, but for me (Chrome on Mac and Safari on iOS), the following grid elements (the ones within the “Awesome stuff”-box, plus the ones after with empty images inside (enfold standard image) do wrap, but not expand to fill the width of the page. See images.
At best it’s a half-assed solution – it does not account for the margin on the left that Enfold inserts (on all screen sizes!) and it stops the grid from being a grid, instead it’s always single-coloumn full width on ALL screen sizes (there is no media query in that solution). I expect more from you at support…
Hi,
which margin on the left? please make things clear by using screenshots. Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)
Best regards,
AndyIn the screenshot you sent you can clearly see the margin on the left (if you inspect the box, you’ll see there’s a 4 % margin added to the left for some reason by Enfold).
Also, by looking at the site at desktop size now you can see there is no longer a grid, because the solution you gave me sets the width of each box to 100% always.
What I want to achieve is what Enfold is supposed to achieve as default: a grid that is any number of boxes wide (done in layout builder), which wraps to fewer columns when the screen size decreases. I drew up a “mockup” of a grid and how it should work. https://sketch.io/render/sk-19f72734af26215b055f6d8c65001ee8.jpeg
Hi,
use my code and add some media queries to it, so it will work on smaller screens only, like:
@media only screen and (max-width: 989px) and { .responsive #top #wrap_all .slide-entry { width: 100%; }}Adjust as needed.
Best regards,
AndyWell, the margin’s still gonna be there, but I guess I can figure that out on my own. What about the second part of my question regarding the blog posts grid?
Hi,
would be best to use different tickets for that, so you ca get a faster reply and this thread doesn’t get too confusing.
Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)
Best regards,
Andy
- You must be logged in to reply to this topic.