Previous CSS no longer working on new theme (Sela)

kirstenhwhyte1 · Member · Jan 15, 2015 at 9:51 am
Copy link

Add topic to favorites
Hi,

I recently changed to the Sela theme – which I love – but I had previously used the following CSS to arrange the short-code images into a grid rather than a vertical list:

.display-posts-listing img {
border: 1px solid #DDD;
background: #fab6c0;
padding: 5px;
margin-bottom: 5px;
}

.display-posts-listing .listing-item img {
max-width: 130px;
}

.display-posts-listing .listing-item {
float: left;
margin-right: 6px;
width: 130px;
height: 200px;
}
Unfortunately this CSS is no longer working. I have tried to change the values but it makes no difference.
Please could someone tell me how to put the images back into a ‘grid’ format on this theme?
Thanks,
Kirsten.

The blog I need help with is: (visible only to logged in users)
raincoaster · Member · Jan 15, 2015 at 10:18 am
Copy link
CSS adaptations are unique to each theme. You’ll have to start again from scratch, basically.
kirstenhwhyte1 · Member · Jan 15, 2015 at 10:25 am
Copy link
Thanks, although your comment has left me a little deflated. I am not all that great with CSS so could you point me in the right direction as to where to start?
lubmir2k · Member · Jan 15, 2015 at 10:31 am
Copy link
Which theme did you previously use?
kirstenhwhyte1 · Member · Jan 15, 2015 at 10:53 am
Copy link
Suits theme, and before that Oxygen. The CSS worked fine on both of them.
thesacredpath · Member · Jan 15, 2015 at 9:57 pm
Copy link
With themes here at WordPress.com, sometimes there is a bit of commonality on certain parts of the CSS, but for the most part, it is theme specific. Going off of your bread recipes page, I made some changes to your code and added one additional rule to bring the title up closer to the images. Replace the display lists CSS you have with the following and see what you think. Make sure and check all your other pages with display posts shortcode as well to make sure they work as well.
```
.display-posts-listing img {
    background: none repeat scroll 0 0 #fab6c0;
    border: 1px solid #ddd;
    margin-bottom: 0;
    padding: 5px;
}
.display-posts-listing .listing-item img {
    max-width: 130px;
}
.display-posts-listing .listing-item {
    float: none;
    height: 250px;
    margin-right: 6px;
    width: 150px;
    display: inline-block;
    vertical-align: top;
    margin-right: 40px;
}
.display-posts-listing .listing-item .title {
    position: relative;
    top: -10px;
}
```
kirstenhwhyte1 · Member · Jan 18, 2015 at 3:31 pm
Copy link
Thank you so much, this code has worked perfectly! :)
thesacredpath · Member · Jan 22, 2015 at 3:49 pm
Copy link
You are welcome.

No items found.