Hi there,
On the mobile version of my website there are two sections (Gift Card and Gallery Wall Promo) that show the image first then the title, description, and button. I would like the order to be:
Title
Image
Description
Button
Can someone guide me as to how to make this edit for mobile only? As of now I’ve tried editing via my theme.css using flex & order but all that does is send the image to the bottom of the section (after the button).
Hey @Anonymous , something more like this?
I did this by using grid instead of flex and separating the header from the paragraph and button. That way you can control the ordering for mobile (grid-row-start: 1 style for the header container).
For desktop, I then set the image to span over two rows so that the text content stays together as expected. The title container needs to be of display: flex with flex-direction: column and justify-content: flex-end so that the entire text section (title, paragraph, button) appears centered vertically next to the image.
Hi Archie,
Yes! Exactly like that - if you don’t mind can you share your code? Just so I know I’m understanding it right
Sure no problem.
Use this link (there’s a css tab and you can test different viewports). The media queries i used are a bit different so that you can illustrate the two layouts with the small window.
In the css file I’ve only created the wrapper classes to show the minimum css needed for both layouts. All other inline styles are using Tailwind just to get something quickly similar to the theme section so you can ignore those.
If it’s not clear, I’m happy to edit your theme for you.
@mkayy92 ,
Kind regards,
Diego
As much as @diego_ezfy ’s solution is simple to implement, there really is no need to use JavaScript for a layout problem.
Here are two reasons why:
Makes the theme more bloated - themes already have quite a lot of JavaScript they don’t need any more if it’s not needed.
Makes it less accessible (turning JavaScript off will not change the layout) - with the new online store 2.0 this is is something new themes have to build for and in my opinion all themes should account for.
Hi Archie,
Thank you for such an in-depth response, I appreciate it immensely. I’ve attempted it but unfortunately not seeing results on my end.
Can you kindly edit my theme?
I appreciate your input. You are correct, though, in this specific case, I beg to differ.
A mere, single querySelectorAll won’t “bloat” a theme nor have any meaningful performative impact whatsoever. It would be a different story if we were talking about consistently implementing Javascript solution for such cases. For an one-time fix, this won’t cause any issues at all. Benchmarking the theme’s Javascript performance before and after would be more accurate proving so.
In addition, around 0.2% of browsers have Javascript disabled. (this number varies from country to country). As far as I am aware, typically the users who surf the web with no Javascript are from governamental/professional institutions where, either for the sake of the institution’s policies or security, aim to limit their employees interactions on the web.
These 0.2% are unlikely to be shopping either.
With that said, yes, making sure your theme runs well without Javascript is good indeed but it’s rarely (if ever) going to be a crucial factor when it comes to converting visitors to customers.
Kind regards,
Diego
