Center image

[GadVenin]

Hello I would like to center this image on desktop, exactly how it is on mobile (cf images)

because right now it is centered left. Link to website : https://sonvenin.com/ 

[DaisyVo]

Hi @GadVenin , i dont see that image

[GadVenin]

Can you see here  ?

[GadVenin]

https://sonvenin.com/pages/instructions-and-declaration 

[DaisyVo · Accepted solution]

Hi @GadVenin 

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

.image-with-text__text-item.grid__item {
    display: none !important;
}

.image-with-text__grid.grid.grid--gapless.grid--1-col.grid--2-col-tablet {
    display: flex !important;
    justify-content: center !important;
}

.image-with-text__media-item.image-with-text__media-item--medium.image-with-text__media-item--middle.grid__item {
    max-width: 50%  !important;
}

Result 

Best,

Daisy

Resulte 

[Manoj_j]

Hi @GadVenin ,

The image you shared, is not shown on your entire store can you please share specific url where image is present.

thanks 

Manoj

[GadVenin]

CAN YOU SEE HERE ? 🙂

[Manoj_j]

Hi @GadVenin , 

I saw your images but , these are not present on your store , if you share specific url for this( image ) problem then we can do something.

[GadVenin]

https://sonvenin.com/pages/instructions-and-declaration

[Manoj_j]

thanks for url

[GadVenin]

Your welcome, Is changing CSS possible only for this page ? To avoid changing all the others parts of the website ?

[Manoj_j]

it will change only this part and don't effect other parts.

[Manoj_j]

@GadVenin ,

Go to Shopify admin -> online Store -> themes.

click Actions -> Edit code

open the base.css in Assets folder add this css at the bottom.

.image-with-text__grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.image-with-text__media-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
}

.image-with-text__media img {
    margin: auto;
    display: block;
    max-width: 100%;
    height: auto;
}

 save , refresh and check the result:

If I was able to assist you, please don’t forget to like and mark it as the solution.
If you need further assistance, feel free to reach out to me on WhatsApp. I'm always happy to help!

Thanks

Manoj

[Manoj_j]

Hi @GadVenin ,

Go to Shopify admin -> Online Store-> themes

click actions -> edit code

open base.css file in assets folder and add the code below in the end

.image-with-text__grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.image-with-text__media-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
}


.image-with-text__media img {
    margin: auto;
    display: block;
    max-width: 100%;
    height: auto;
}

 save and refresh.

result:

If I was able to assist you, please don’t forget to like and mark it as the solution.
If you need further assistance, feel free to reach out to me on WhatsApp. I'm always happy to help! 

thanks

Manoj

[ZestardTech]

Hello @GadVenin,

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:

.image-with-text__text-item.grid__item {
    display: none !important;
}
.image-with-text__media.image-with-text__media--adapt.gradient.color-background-1.global-media-settings.media img {
    height: unset !important;
    width: 70% !important;
    text-align: center !important;
    display: flex;
    justify-self: anchor-center !important;
}
@media screen and (max-width:768px){
.image-with-text__media.image-with-text__media--adapt.gradient.color-background-1.global-media-settings.media img {
        width: 100% !important;
}
}

Let me know if you need further assistance!