Centre Image with Text on Mobile

[ellacoker]

Hello,

I would like to centre the image with text on this certain page in mobile version. The ones that I would like to centre are the chakra information. How do I go about this? Thank you

URL: https://admin.shopify.com/store/wss10u-is/themes/175807824166/editor?customCss=true&previewPath=%2Fpages%2Funderstanding-chakras&previewMode=mobile

Password: ellacoker

[goldi07]

Hello @ellacoker try this css

@media screen and (max-width: 768px) {
    .your-chakra-section-class {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .your-chakra-section-class img {
        margin: 0 auto;
    }
}

Replace .your-chakra-section-class with the actual class or ID of the chakra information container

Thankyou

[ellacoker]

Hi there,

I am a little confused at where to find the specific ID of the container. What part of this do I copy in? Thank you

[goldi07]

to Find the Class or ID of the Chakra Container
1 Right-click on the chakra information section on your page (the part you want to center).

2 From the menu that appears, click Inspect (or press Ctrl + Shift + I on your keyboard). This will open the developer tools in your browser.

3 In the Elements tab of the developer tools, you’ll see the HTML structure of the page.

4 Hover over different elements in the HTML code, and the corresponding part of the page will be highlighted in the browser. You’re looking for the container that holds both the image and text for the chakra information.

5 Look for an element like this:

    
    

Chakra description

In this example, the class is chakra-info. This is the container for both the image and text.

6 Copy the class or ID that wraps the chakra information. It might look like:

Class: chakra-info, chakra-section, or something similar.
ID: #chakra-info (ID is usually preceded by # in CSS).

[ellacoker]

Thank you for all this information. So this is what i copied from the html block:

<link

So do i copy in… shopify-section-template–24276633190694__image_with_text_aXngwj

?

[DaisyVo]

HI @ellacoker ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Edit code > theme.liquid
Step 3: Copy the code below and paste it before tag

Here is the code for step 2:

{% style %}
{% if canonical_url == "https://www.samiyaskincare.com.au/pages/understanding-chakras" %}
@media screen and (max-width: 768px){
.image-with-text__text-item.grid__item * {
    text-align: center !important;
    justify-content: center !important;
    margin-inline: auto !important;
}
}
{% endif %}
{% endstyle %}

Here is the result:

Please let me know if it works!

Best,
Daisy

[LizHoang]

Hi @ellacoker , thanks for reaching out.

I checked and noticed that the text appears centered on the live theme already. In this case, may I ask if there are any other pages where the issue persists so I can assist you further?

Liz