Help making button text wrap on mobile/spacing

[Slowbriety]

Hi Shopify Community! I think this is a simple fix but I'm not familiar with coding, super new.

On a desktop/browser, the text/spacing is perfectly fine. On mobile, the button text is not wrapped appropriately and the box/text are intertwined.

In addition, the email sign-up (on mobile) is not spaced enough.

Thank you for the help.

[Beae_Cass · Accepted solution]

Hi @Slowbriety ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid file
3. Paste below code before </body>:

<style>
@media only screen and (max-width: 405px) {

a.btn_all.text_uppercase.font_futura {
    display: flex;
    padding: 15px 20px
}
   
}

@media only screen and (max-width: 560px) {
     .social_icons_content {
        margin-top: 25px
    }
}
</style>

Best regards,

Anthony

[Beae_Cass · Accepted solution]

Hi @Slowbriety ,

Sorry for the late reply, you can try this code below to fix the issue:

<style>
@media only screen and (max-width: 405px) {
a.btn_all.text_uppercase.font_futura {
    justify-content: center
}
}
@media screen and (max-width: 1025px) {
.mobile_social_icons .icons:nth-child(2) {
    margin: unset;
}
}
</style>

Best regards,

Anthony

[Beae_Cass]

Hi @Slowbriety ,

Could you please share you store URL, so that I can help you

[Slowbriety]

Hey thank you, sure - https://efcd93-2.myshopify.com/

PW: youlovethat

I've read that putting something into the theme.css.liquid file might help but I can't find that one, all I have is theme.liquid

[Beae_Cass · Accepted solution]

Hi @Slowbriety ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid file
3. Paste below code before </body>:

<style>
@media only screen and (max-width: 405px) {

a.btn_all.text_uppercase.font_futura {
    display: flex;
    padding: 15px 20px
}
   
}

@media only screen and (max-width: 560px) {
     .social_icons_content {
        margin-top: 25px
    }
}
</style>

Best regards,

Anthony

[Slowbriety]

Thank you so much Anthony, that worked perfectly!

[Beae_Cass]

I am very happy to have helped you. If you have any further problems, don't hesitate. Have a good day

[Slowbriety]

Two more issues related to centering now (on mobile). I'm trying to edit directly in the custom CSS box within the editor to no avail:

"Listen Now" now is off to the left within the box when it should be completely centered.

Social icons on the bottom of the clickable menu dropdown have some gap between the first two and last 6.

Thank you and you too!

 

  

[Beae_Cass · Accepted solution]

Hi @Slowbriety ,

Sorry for the late reply, you can try this code below to fix the issue:

<style>
@media only screen and (max-width: 405px) {
a.btn_all.text_uppercase.font_futura {
    justify-content: center
}
}
@media screen and (max-width: 1025px) {
.mobile_social_icons .icons:nth-child(2) {
    margin: unset;
}
}
</style>

Best regards,

Anthony

[Slowbriety]

This worked perfectly, thank you for even replying so no worries at all!

I have a few more small issues if you will, one of which I think I can resolve in the Shopify editor when I have a sec to go back in later tonight, and then I think I'm close to launching the site finally 🙂

1. Desktop & Mobile Products Page  - What coding language would I use to move “Products” over to the right? It's currently overlapping with the site menu options (home/shop) on desktop, and my client's logo on mobile.

2. Desktop & Mobile Cart Page - You’ll see there are invisible (white clickable icons over white background) links. I circled all of them so you can click on them. Can this header be color changed in the editor or do I need to code the "header" color to black?

  

 

 

[Beae_Cass · Accepted solution]

Hi @Slowbriety ,

For 1st issue, I offer a solution like this you see if it is suitable for your store. Because it will help your layout on both mobile and desktop unified.

<style>
h1.collection-hero__title {
    position: relative;
    top: 80px;
    color: black;
}
aside#main-collection-filters {
    padding-top: 15px
}
</style>

For 2nd issue, I checked and didn't see the problem you described

Best regards,

Anthony

[Slowbriety]

Thank you Anthony - that worked. And for the 2nd issue, I believe my former web dev went back in and helped fix the visibility issues just as you replied!