Craft Template - Mobile logo not centered

[deniseagius23]

Hi,

I am using the craft template however the logo in the mobile version is not centered. would anyone be able to assist on how this can be resolved?

Thanks

Denise

[Tech_Coding]

Hello @deniseagius23
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

[Hasan112]

.header__heading {
text-align: center !important;
}

[mt686]

Hey there! The issue with your logo not being centered on mobile in the Craft theme is likely due to CSS rules for the header layout. Here’s how to fix it:

---

Steps to Center the Logo on Mobile in Craft Theme1. Log in to Shopify Admin:

• Navigate to Online Store > Themes > Edit Code.

1. Locate the CSS File:

   • Open the theme.css or style.css file in the Assets folder.

2. Add Custom CSS: Add the following code to target the mobile version of your logo:

@media (max-width: 768px) { /* Target mobile screens */
    .header__logo {
        display: flex;
        justify-content: center; /* Centers the logo horizontally */
        align-items: center; /* Centers the logo vertically, if necessary */
        margin: 0 auto; /* Prevents any unintended left/right margins */
        text-align: center;
    }

    .header__logo img {
        max-width: 100%; /* Ensures logo scales properly */
        height: auto; /* Maintains the aspect ratio */
    }
}

• Replace .header__logo with the actual class name used for the logo in the Craft theme, if it’s different.

• Save and Preview:

  • Save your changes and refresh the mobile version of your store to see the logo centered.

---

Test Adjustments- If the logo still isn’t centered, double-check the header structure using your browser’s Inspect Tool. Look for parent elements that might be affecting the alignment, such as flex containers or padding, and adjust those as well.

---

No-Code Option with EasyEdits

If you prefer a simpler solution, EasyEdits allows you to visually adjust and preview header alignments without touching code. You can make edits during the free trial and keep them forever. Fair disclaimer I am the developer, and can answer any questions!

---

Let me know if you need help identifying the class name or tweaking further! (Website URL and password, if needed, would be helpful!)

[Made4uo-Ribe]

Hi @deniseagius23

Please, share your store URL. Thanks!

[DaisyVo]

Hi @deniseagius23 ,

As checked, it is because there are 2 icons on the right side, but only 1 on the left side so the Logo is not centered.

Can you share your store URL so that I can check further?

Best,

Daisy

[deniseagius23]

Hi.

https://atr5nx0vjvccq33d-89506611531.shopifypreview.com

Please let me know if you are able to access with this link.

Many Thanks

Denise

[deniseagius23]

Hi.

https://atr5nx0vjvccq33d-89506611531.shopifypreview.com

Please let me know if you are able to access with this link.

Many Thanks

Denise

[Made4uo-Ribe]

Thank you for the info. The logo is already centered, but it appears off-center because there is one icon on the left and two icons on the right. Do you like to remove one icons on the right or adjust the to make it more right?

[deniseagius23]

Hi. I would like to keep all icons if possible. Can the logo and the icons on the right be moved to the right to centre the logo?

Thanks

Denise

[deniseagius23]

Update to Shop URL: https://uhwfbz-y3.myshopify.com/

[Made4uo-Ribe]

Yep sure, let me know if this enough.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

• And Save.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

[deniseagius23]

Hi. Unfortunately this did not work for me.

Thanks

Denise

[Tech_Coding]

Hello @deniseagius23

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (max-width:767px){ .header { grid-template-columns: 1fr 2fr 1fr !important; align-items: center; margin: 0 auto; } }

RESULT:

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Made4uo-Ribe]

Try this one again. Same instruction.

And Save.

Result:

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

[ZestardTech]

Hello @deniseagius23 ,

Here are the steps to apply the necessary changes in your Shopify store:

1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
2. Locate Asset > base.css and paste the following code at the bottom of the file:

body .header--mobile-left {
    grid-template-columns: 1fr 2fr 1fr;
}

.header--mobile-left .header__heading, .header--mobile-left .header__heading-link {
    text-align: center !important;
    justify-self: center !important;
}

Let me know if you need further assistance!

[deniseagius23]

Thanks this worked

[deniseagius23]

Thanks this worked.

[Made4uo-Ribe]

Welcome! Would you mind hitting ‘like’ as well? Thanks!