Hi,
I recently completed the site homepage in the Atlantic theme, however when I made the site live and checked it on mobile, all the content is stacked to the left, overlapping and small. I did not change anything other than within the template. If there is a solution I’d love to hear how to fix this. See screen shots attached.
Hi, @LindenDavies !
That does look odd - it almost looks like your mobile view is set to display as a desktop view. Can I ask if you have made any coding changes to your theme recently? For example, if you’ve added any apps that would require you to add lines of HTML/CSS to the themes coding files? If you have added any apps, it would be worthwhile going back over the guides you used to make sure every step was followed exactly; code is very precise, so if one line of code is added in the wrong place or even if there is a character missing from the line, it can throw off a whole section of the theme.
If there have been coding changes made to edit the appearance rather than adding an app, you do still have the option to roll the code back to what it was before the changes were made. You can do this by going to Online Store > Themes, then click on Actions beside your live theme. Here, you can click Edit Code to open the editor, then click on Current here at the top of your theme.liquid file:
When you click Current, it will open a dropdown menu of past dates the theme code was edited. You can select any date there (I would recommend the most recent one) to roll the code back to the version of that specific date. If the coding changes you’ve made were to add code from an app, this rollback will remove that code so the app would not work correctly again after this. You would need to re-add that app code again, so this rollback method is best to use if you’ve made coding changes for cosmetic reasons!
As Atlantic is a third-party theme, you also have the option of contacting the themes developers (Pixel Union) via their help centre. There is a link here to their support page where you can submit a theme request for assistance! They will be able to look over their own code to see if there are any errors in the mobile display.
Let me know about the app or coding changes and we can take things from there!
Ava
Social Care | help.shopify.com
I am having the exact same issue where everything is squeezed to the left. I thought it might be rendering the slideshow at full-scale–namely all images at one. So I removed those, but still seeing the issue. I haven’t added any new apps recently. And any code changes would have been long ago. I am waiting to hear back from the theme host, but was wondering how you resolved your issue? Thanks!
FYI this is the response I rec’d from Altantic Theme Helpdesk:
thanks for getting in touch with us! This is a known bug from previous versions of the theme, which our developers have since resolved. However, the fix can be applied quickly in your current theme:
Go to Actions > Edit Code next to the theme you’d like to edit.
Scroll to the Assets folder and open up the theme.css.liquid file.
At the very bottom of this file, paste in the following code snippet:
.template-index .home-section.slideshow {
overflow: hidden;
}
Make sure to save your changes and refresh the theme preview to see it take effect.
And it worked!!!
Had the same issue and this fixed it for me as well.