Image border radius

Store Design
, ,
1

Hi im trying to get the images in marked section to be rounded with border-radius setting, like the rest of the sections, but I can’t seem to locate the needed selector. Could anyone help me out with that please!

There’s a setting in theme editor to do that, but I only want the rounding to apper on desktop version.

heres the preview link: https://fzuziqnlw246n9lk-77830390093.shopifypreview.com

image
image1920×703 240 KB

1 Like
2

Try this in “Custom CSS” of this section

@media (min-width:1024px){
  [class*="ss_image_grid_pro"] {
    border-radius: 20px;
  }
}

Probably even “Theme settings”=> “Cusomt CSS”

3

Hello, @JustinasR

Is it fixed?

image
image1343×497 164 KB

4

Hello @JustinasR

To add rounded corners to your images:

  1. Go to Online Store → Themes → Edit code

  2. Open base.css

  3. Add the following code anywhere inside base.css:

[class*="ss_image_grid_pro"]
{
    border-radius: 15px;
}

Please hit Like and Mark it as a Solution if you find our reply helpful.

5

Hi @JustinasR

You can target that specific area with a media query so the rounding effect is only on desktop. Inspect the images to get their section or class (for example .marked-section img) and add a CSS like this:

@media only screen and (min-width: 1024px) {
.marked-section img {
border-radius: 12px; /* adjust as needed */
}
}

This gives the border radius only to windows larger than 1024px, leaving mobiles intact. Change the class to your section’s exact selector for the images.