Hi there!
I tested on my own installation of Motif and the following CSS worked to remove the padding around the header image:
.site-branding {
padding: 0;
}
Did you add the above to the style.css file of your child theme? If you can provide a link to your site, I’ll be happy to take a look into why the CSS isn’t working on your setup.
Ahh, it’s now working – the only issue I now have is when the page is set to full width, the padding either side of the content area is uneven..
Here’s a link to the website:
http://www.medwaybeekeepers.co.uk/
Hi there,
I’m glad that that CSS is working for you now!
The padding between the main content on full width pages should be even.
I took a look over your site and the only full width page that I’m currently seeing is the home page, which only has one image. The image itself isn’t centred, which is why the padding around the content may look uneven to you. You could centre the image by going to the editor for that page, clicking on the image, and using the “Justify” tool from the editor’s toolbar. (You will need to click on “Toolbar Toggle” in order to see the icon for the “Justify” tool.)
Let me know how you get on with that or if you’re still seeing an issue.
Oh, sorry I didn’t explain properly. I have linked to a screen shot and highlighted where the padding issue is…
http://www.medwaybeekeepers.co.uk/wp-content/uploads/2016/06/example.jpg
If you notice, there is too much padding on the right hand side compared to the left. When the widgets are in use this issue isn’t there but for the main page, I don’t want to use widgets.
Ah, I see what you mean! The theme is adding a little bit of extra margin there. You could override that with the following custom CSS:
@media screen and (min-width: 1200px)
.content-area.full-width {
margin-right: 24px;
}
That hasn’t worked at all I’m afraid! Sorry
There were some missing curly braces in the custom CSS I provided that will have caused it to not work. I’m sorry about that!
Please could you try again with the following:
@media screen and (min-width: 1200px) {
.content-area.full-width {
margin-right: 24px;
}
}
Thanks!
