Help needed with css for object layout

zahidmakda1986 · Member · May 13, 2025 at 9:54 am
Copy link

Add topic to favorites
On my homepage, i have 4 images for certain sections of my website. the 4 images are located under the title EXPLORE SECTIONS

on desktop and table mode, these 4 images appear in one row, which i nice. however, in mobile mode, they appear as 4 images below each other. what CSS would i need to add to change it so the images appear as 2 images per row in mobile?

thanks

The blog I need help with is: (visible only to logged in users)
pranjalpratapsingh01 · Staff · May 13, 2025 at 10:36 am
Copy link
Hey @zahidmakda1986,

I see you want your explore section’s images to align in a certain way.

By your description and my understanding.
- You wish to have 4 images in a single row on desktop or tablet.
- You also wish to have 2 images in one row in mobile view.
  
  Please allow me to guide you through a simple workaround ( if it’s not available in your theme as a feature ).
  
  I have attached a CSS code below that you can try in your theme and we can circle back if it doesn’t work.
```
body .is-layout-flex {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1 rem;
}

@media (max-width: 768px) {
    body .is-layout-flex {
        grid-template-columns: repeat(2, 1fr);
    }

    body .wp-block-cover{
        min-height: 12rem !important;
    }
    body .wp-block-heading  {
        font-size: 1rem;
    }
    body .wp-block-group .has-background {
        padding: 0.5rem !important;
    }
}
```
You need to add this code in Appearance > Your Theme > Customize > Left Panel at the bottom “Additional CSS”.

In case you don’t see any option like that, do let me know.
zahidmakda1986 · Member · May 14, 2025 at 10:18 am
Copy link
thanks. it worked a charm! thanks very much
zahidmakda1986 · Member · May 14, 2025 at 10:33 am
Copy link
actually, i noticed that this has affected all columns throughout the website. i only wanted the 2 accross on the above specified image section… is this possible to target only a specific section?
pranjalpratapsingh01 · Staff · May 14, 2025 at 10:52 am
Copy link
The theme you are using has generic class names for a lot of common elements. So yes that makes sense why that is happening.

Can you share the name of theme you are using and I can construct a more viable solution for you?
zahidmakda1986 · Member · May 14, 2025 at 11:12 am
Copy link
the theme is called “The9 Store”

its a free version I’m using.
pranjalpratapsingh01 · Staff · May 14, 2025 at 11:16 am
Copy link
Alright, let me have a look at it. I might offer you with few solutions that you can try. Alright?
zahidmakda1986 · Member · May 14, 2025 at 3:04 pm
Copy link
yes thats fine.
pranjalpratapsingh01 · Staff · May 14, 2025 at 3:52 pm
Copy link
Alright let me provide you with a solution.
pranjalpratapsingh01 · Staff · May 14, 2025 at 4:05 pm
Copy link
I am trying to write a whole article for help with images, but somehow forum isn’t letting me post it.
zahidmakda1986 · Member · May 14, 2025 at 4:17 pm
Copy link
Will the forum let you upload it as a pdf document?
pranjalpratapsingh01 · Staff · May 14, 2025 at 5:33 pm
Copy link
Alright, assuming you have used Gutenberg ( default editor ) of WordPress to design the cards manually, I am penning a solution for you.

Follow these steps :

Step 1: Open your page in editor ( the one which has these cards ).

Step 2: I want you to select the main parent of these cards. Which in case is a group.

You can select the main parent group by going to the top-left corner and see ‘Document Overview’ button > and click the main parent group of your cards. Please ensure you have selected the parent group before proceeding to the next step.

Step 3: Now while main group being actively selected, go to the right settings panel and click on the Advanced drop down.

Inside Advanced settings, you will see Additional CSS Classes(es) input box. Enter explore-cards inside of it and click on save button.

Step 4: Paste the following code in Appearance > Your Theme > Customize > Left Panel at the bottom “Additional CSS”. ( Remove the previous code. )
```
body .explore-cards {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    body .explore-cards {
        grid-template-columns: repeat(1, 1fr);
    }
    
    body .explore-cards .wp-block-heading  {
        font-size: 1rem;
    }
    
    body .explore-cards.wp-block-group .has-background {
        padding: 0.5rem !important;
    }
}
```
This will apply the css to specific section only, as seen below.

I tried imgur but it’s also not working today for images.
zahidmakda1986 · Member · May 15, 2025 at 4:25 am
Copy link
thanks for your hard work and suggestion, but unfortuantely it didnt change much. it’s now gone back to single cards per row.
pranjalpratapsingh01 · Staff · May 15, 2025 at 6:15 am
Copy link
Hey @zahidmakda1986,

Did you select the parent group and add a custom class explore-cards to the it?

In case you did, and it still doesn’t work. Don’t worry, I will try to get it running for you.
zahidmakda1986 · Member · May 15, 2025 at 6:46 am
Copy link
yes i did exactly as you said sir.
zahidmakda1986 · Member · May 15, 2025 at 6:47 am
Copy link
Should it not be #explore-cards instead of .explore-cards?
pranjalpratapsingh01 · Staff · May 15, 2025 at 7:35 am
Copy link
Since you added it to classes (explore-cards), the css for it should use a class selector.

That goes like :
```
.class-name { 

}
```
Also, I observed you added the an id-> “explore-cards” to the main group which is also fine. But I will recommend you using class instead.

Also, on further inspection, I realized, you should be adding the class “explore-cards” not to the parent group, but the parent column.

Group > Column > Column 1, Column 2, Column 3, Column 4

Select Parent Column that consists all the card columns and add explore-cards class there.

Then this following code :
```
body .explore-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    body .explore-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    body .explore-cards .wp-block-heading  {
        font-size: 1rem;
    }
    
    body .explore-cards.wp-block-group .has-background {
        padding: 0.5rem !important;
    }
}
```
zahidmakda1986 · Member · May 15, 2025 at 10:20 am
Copy link
thanks. seems to be working now
pranjalpratapsingh01 · Staff · May 15, 2025 at 12:43 pm
Copy link
Alright @zahidmakda1986, Please mark this topic as resolved.

No items found.