mobile help

Technical Q&A
, ,
1

I need some help optimizing part of my site for mobile. On desktop it is fine. Now, don’t come at me but I used chatgpt to help me build a custom container(?) with a photo and buttons in specific places. It was a lot of back and forth. There was sizing issues, clarity issues, placement issues. I finally got it to how it should be however when I view on mobile it is all kinds of messed up. I went back to chatgpt to try to solve it but when I tried it then messed up the desktop view. Can someone help me figure out what I need to do so that the mobile version looks ok? it doesnt have to be perfect. Just not what it is right now.

I am a soap maker. Not a programmer! Only on the homepage you will see the categories with their buttons. Using dawn theme.

Thank you!!

2

Hi @jenmarie1203

Welcome to the forum, and I must say it is very brave of you to use Chat GPT like that.

But it is wrong code in the start, one image and 5 buttons, that can not be responsive and look good.

But I suggest you first duplicate your live/production theme and then work on a copy just to be safe.

Next, Dawn theme has a section that might be of use to you and make it almost like that. It is “Collection list”

section. Try it out, add 5 collections, connect to your collection, you have links, set 5 as the number of columns. For that also you need to set each collection image as one of those you have.

But if that does not look well or does not suit you or you do not want to set those images to collection, try the Multicolumn section, similar thing but you can set a custom image and then choose link to collection. Maybe even easier :slightly_smiling_face:

Good luck

3

Appreciate your swift response! The code does work for the one custom image I made with the 5 buttons. It just isn’t working on mobile. It’s causing you to scroll in order to see all of the buttons.

I tried both of the options you suggested. Thank you! I didn’t know about the multicolumn option however they cause all the images to look way too small. Any suggestions on how to make my 5 images larger?

4

Hi Jenmarie! :waving_hand:

You’re doing an amazing job already — getting this far without being a programmer is impressive! The issue you’re describing sounds like something to do with how the layout adjusts on smaller screens. It’s usually a small tweak in the code (like spacing, alignment, or container settings) to make it look clean on mobile without affecting desktop.

A quick fix you can try is adding this CSS to the container holding those blocks:

overflow-x: auto;

This allows the section to scroll horizontally if it’s wider than the screen, and it often solves layout issues like the one you’re seeing on mobile.

That said, without seeing the full structure or theme setup, I can’t say for sure if it’s the most future-proof solution — sometimes it just takes a small width or layout tweak to make everything responsive.

If it helps, I’d be happy to take a quick look or guide you further.

I hope it works as your expect.
Thanks.

5

Thank you for helping me!!! I have no idea where to put that css you suggested. I put it into a few places but nothing seemed to change. I’m attaching the coding that I used to create the container. There is also the schema if you need it. Seriously, thank you!!

{% if section.settings.image != blank %}

<img
src=“{{ section.settings.image | img_url: ‘1920x1920’ }}”
alt=“Image with buttons”
style=“width: 100%; height: 50%;”
loading=“lazy”

{% endif %}

{% assign button_positions = (1..5) %}
{% for i in button_positions %}
{% assign button_link_key = “button_” | append: i | append: “link" %}
{% assign button_top_key = "button” | append: i | append: “top" %}
{% assign button_left_key = "button” | append: i | append: “left" %}
{% assign button_label_key = "button” | append: i | append: “_label” %}

{% assign link = section.settings[button_link_key] %}
{% assign top = section.settings[button_top_key] %}
{% assign left = section.settings[button_left_key] %}
{% assign label = section.settings[button_label_key] %}

{% if link != blank %}
{{ label }}
{% endif %}
{% endfor %}

.hotspot-button { position: absolute; transform: translate(-50%, -50%); background-color: #fc5890; color: white; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: bold; } .hotspot-button:hover { background-color: #ffbfd5; }
6

ok I played around with the first line and changed width and min-width to auto and that worked however now my buttons are massive on mobile. I need to scale them down if possible. thank you!

7

I think I made something work! probably the worst coding ever but it looks ok!

8

That’s great, happy to see you solved that. If you want me to check, you can dm me anytime!