[Resolved] Centre align

[Author]

Posts

[jackC-6]

I am trying to:

Align the content at the bottom of my home page (puppies.co.uk) in the centre.

The puppies for sale views is left aligned and I cant work out what CSS needs to be used to move it over

[Christian Cox]

You can add a CSS class "centre-grid" to the grid View and give that class the following styles:

.centre-grid {
margin-right: auto;
margin-left: auto;
display: block;
width: 720px;
}

This will predefine a width for the grid and center it horizontally inside the container.

[jackC-6]

Hi there, this didnt work it just made all the items fall under neath eachother in the centre. I still want them all in the same row

[Christian Cox]

We're talking about the Most Recent Puppies for Sale section, correct? I don't see the CSS class applied here. Can you replace it so I can troubleshoot?

[jackC-6]

Hi, you're right. I took it off as not working. Added back in now, please tell me why not working 🙂

Thanks!

[jackC-6]

The issue is with mobile view 🙂

[Christian Cox]

Hi, I'm having trouble accessing the site at the moment, I see a server error 500 message. I will check again shortly.

[Christian Cox]

I'm afraid I don't have a simple answer here. All the styles are cached and minified so I can't really see what's happening. What I can see is that there are some conflicts between Bootstrap and your theme, because the Bootstrap grid is not behaving as I would expect. For example, I see lots of styles for the class "row", which look very suspicious...if your theme or other plugins are modifying the row class then the code isn't Bootstrap compatible. What theme is this?