Removing padding on homepage via child theme

Argh, I can’t link this image….

You can ask general CSS forums for general CSS queries;
https://csscreator.com/forum
https://www.cssforum.com.pk/
https://css-tricks.com/forums/
https://www.welovecss.com/
https://www.codingforums.com/

I can’t link this image..

to post a link, write a work, highlight it, and then add the link.

formatting questions without a live link to the problem are virtually impossible to answer;
also helping with general formatting is outside the main scope of this forum.

Hi guys, It appears the link worked anyway. It was just how it displayed on my computer…so it should be displayed above.

I wasn’t aware I couldn’t post this sort of question here. I got one answered the other day along the same lines and no one mentioned it.

I wasn’t aware I couldn’t post this sort of question here.

you can ask those questions – however, the chance to get an answer is not as high as it might be in a css forum.

you can also work with a browser inspection tool (I use Firefox’ web developer add-on; some modern browsers have the ‘inspect element’ function…) to find out where the padding comes from.

can you post a live link?

from the screenshot, I cannot even see if the margin/padding belongs to the screenshot image, or any slideshow, nor that there is a slideshow in the site …

Oh clever! It may be worth changing my browser for that!

Well, I wasn’t activated. I was just making mods to my child and then previewing. So I made it live…

https://dnaproductionsuk.com/

Now it’s changed the theme completely! When I preview it shows me what you can see from the screenshot. However now I’ve activated it it’s removed my banner, changed the picture and apparently wiped my background image too. I was under the assumption that child themes work from the parent and change anything mentioned in the child theme but aside of this, will keep everything the same as per the parent theme.

Do I have this wrong?

switching to a child theme is like switching themes – you will need to set any custom headers, backgrounds, or menus again.

one problem is that your slideshow is not responsive (flexible in width) so in a 2000px wide site, there will always be some empty space left and right.

anyway, to start with removing the padding and margins from the main content area, try to add these styles:

.page.singular #content{ width:100% ;margin: 0; }
.page.singular .entry-header, .page.singular .entry-content, .page.singular footer.entry-meta, .page.singular #comments-title
{ width: 100%; }
.entry-content #leftsample { margin-left: auto; margin-right: auto; }

the last style is to center the slideshow.

there might be more minor styles that need adjusting.

thanks so much for this, I’m going to start editing now and see if it works. can I ask, where it says page.singular, does this mean that this will only apply to the one page? What is the equivalent if I want these padding settings across all pages?

this will only apply to the one page?

this means it will apply to all static pages;

for just the one page, replace .page with .page-id-4
or
for just the home page, replace .page with .home

Ok great.

I just tried it and it hasn’t made an effect.. here’s the code I now have in my child style.css:

@import url(“../twentyeleven/style.css”);

.page.singular #content{ width:100% ;margin: 0; }
.page.singular .entry-header, .page.singular .entry-content, .page.singular footer.entry-meta, .page.singular #comments-title
{ width: 100%; }
.entry-content #leftsample { margin-left: auto; margin-right: auto; }

body {
padding: 0 0;
}
#page {
margin: 0;
max-width: 2000px;
}

Have I been an idiot and put it in the wrong place?

all is fine – your browser cache is just holding on to old styles;

clear the browser cache by pressing ‘ctrl f5’ or ‘reoload’ the web page (a few times).

the main large space above the slider can be reduced with:

.page.singular .hentry { padding-top: 0; }

and then there is also the empty page title etc.

AH!!!! That would also explain why some other changes didn’t pop up before..

Great stuff, my left and right margins are completely wide open, thank you!

The vertical gap between slideshow and menu bar is still there however, should this work?

.page.singular #content{ height:100% ;margin: 0; }

Thanks so much for your help on this, I’m so close!

should this work?

not likely –

unfortunately, there are quite a few margins, paddings, elements, etc between the nav bar ans the slideshow – one of them I mentined in my second last reply.

keep persisting with the browser inspection tools, and also look into the html of the page in your browser; this might give you further ideas where to reduce margins or what elements to hide with ‘display: none;’ in the corresponding styles.

Sorry, it appears my computer didn’t refresh the second half of that post..

The height has now halved so I’m assuming a few little tweaks like you just mentioned should decrease it even more. Although it seems natural the way it looks now.

Thanks so much!!