Assistance Needed with CSS Layout Issues on Shopify Site (Country/Region, Language Selection & Foote

[Monique2002]

Hello everyone,

I have a problem with the display of the country/region and language selection on my Shopify site, both in the desktop and mobile views. Originally, the text labels (“Country/Region” and “Language”) were correctly centered, but after making some changes to my CSS, these labels are no longer centered.

Additionally, I had tried to arrange the menus in the footer side by side in the mobile view, instead of stacking them vertically, but unfortunately, the result was not as expected. I have tried many CSS changes, including removing codes I previously added in the base.css to optimize the centering and layout, but I’m still not getting the desired structure.

Specifically, I want to:

1. Center the text labels for Country/Region and Language correctly again in both the desktop and mobile views.

2. Arrange the footer menus (e.g., Support, Legal, etc.) side by side in the mobile view instead of stacking them vertically.

3. Ensure that none of the changes affect other areas (e.g., the layout of the Country/Region and Language selection).

Can anyone help me fix these layout issues and implement the desired adjustments? I would appreciate detailed instructions on how to modify the CSS code accordingly.

[rajweb]

Hey @Monique2002 ,

To fix the layout issues, you need to adjust your CSS. Here’s how to:

1. Centering the Labels (“Country/Region” and “Language”)

• Add this CSS to your base.css file:

.footer__locale-selector label {
    display: block;
    text-align: center;
    width: 100%;
}

2. Align Footer Menus Side by Side in Mobile View

@media (max-width: 768px) {  /* Adjust breakpoint if needed */
    .footer__blocks-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        text-align: left;
    }

    .footer__block {
        width: 48%; /* Adjust for spacing */
    }
}

This will make the footer menus appear in two columns on smaller screens

[Elyseashley]

I can see the layout issues in both desktop and mobile views. Here’s how we can fix them:

Centering “Land/Region” & “Sprache” Labels

Try adding this to your base.css or theme’s custom CSS:

This ensures the labels are fully centered in both views.

Arranging Footer Menus Side-by-Side in Mobile View

Right now, the footer menus stack vertically. To make them display side by side on mobile, add:

This ensures the menus stay side by side without breaking into a stacked view.

Prevent Unintended Changes Elsewhere

These rules only target footer elements, so other parts of your site won’t be affected.

Steps to Apply1. Go to Online Store → Themes → Click “Edit Code”

1. Find base.css (or theme.css)

2. Paste the above CSS at the bottom

3. Save & refresh the page to see the effect

Try these fixes and let me know if you need more tweaks!