CSS Image with text

Store Design
,
1

Hello,

I need to change the side of my image on desktop but the basic sizes of shopify are not enought, i tried some CSS but could not change only on desktop

here is the link https://sonvenin.com/pages/instructions-and-declaration

At this moment it is too big on desktop and perfect on mobile

I need to change the side ( as in second picture ) but while keeping the actual size on mobile…

First image is the objective on desktop and second is the actual too big image

Thx community

good siez.png
good siez.png1436×627 45 KB

Too big.png
Too big.png1442×781 83.4 KB

2

Hi @GadVenin .

Here’s how to achieve that:

  1. Go to “Online Store”
  2. Three dots → Edit Code
  3. Find the base.css file
  4. Add the following code at the bottom of the file
  5. Save and refresh the target store page
@media screen and (min-width: 750px) {
    .grid--3-col-tablet .grid__item {
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

If done correctly, the result should be like this:

Screenshot_3.png
Screenshot_3.png1012×668 42.2 KB

I hope this helps!

If you don’t want to edit the theme code directly, you can use a code injection app like the one in my signature.