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/
2 Likes
Hi @GadVenin , i dont see that image
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
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.
thanks for url
1 Like
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
1 Like
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
2 Likes
Your welcome, Is changing CSS possible only for this page ? To avoid changing all the others parts of the website ?
it will change only this part and don’t effect other parts.
Hello @GadVenin ,
Here are the steps to apply the necessary changes in your Shopify store:
- In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
- 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!
1 Like
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
1 Like