Please help! Margins, header and footer image not working.

kayaker89 · July 2016

Good day,

I am having a lot of trouble with the margins for my header and footer and general margins I can't figure out where to increase the margins/decrease the padding on my website.

If you have a look here at my website; http://www.gracearoundtheworld.com/?page_id=13

My header and footer images will no go across the full width of the webpage. I have tried every setting in be theme options, if I choose center-repeat then it does have exactly as you see now with pieces of the image repeated on both sides making it full width for footer, not for header as there is no repeat option. This looks terrible, I want images to go all the way across, full width.

I went and uploaded photos with larger pixel size and this fixed the problem, the photos went full width. But after 30 minutes they went back to as now.

So confused. Maybe I messed something up somewhere with pixel size for my website. Someone installed Imsanity plugin on my website and set it to upload my photos to 1150, and my pixel size is set to 1150. I went and changed imsanity to 1500, then uploaded the header and footer again. As I said this temporarily fixed it and after 30 minutes, I didn't change anything in this time, it went back to as now.

Is something wrong with the setting for my width, margins? Where on earth do I go and change this? Also is 1150 pixels a good size to have set for my general setting on my website?

Also I really want to decrease the padding or margin width on my website. Here is what it looks like now; http://www.gracearoundtheworld.com/?page_id=138

How do I make it so everything has less padding on left and right side? My sidebar and the left side where my blog posts show up.

I'm adding this question as I feel it is all related and I may have stuffed up settings somewhere. Any insight on where to look is much appreciated! I am not using a child theme, I did post another question on if it's possible to move to child theme with my already built website. Any code you are suggesting to put in please let me know where exactly because I don't really understand that too well.

I really appreciate any help I can get!! Thank you!

Grace Bodo

Albert · July 2016

Hi,

1. The images does not go across the full width because you are using larger screen and the backgrounds are not wide enough. But if you want to expand current sizes across the full width, you need to use an extra css:

body:not(.template-slider) #Header_wrapper { background-size: cover !important; }
#Footer { background-size: cover !important; }

2. To decrease padding/margin on mobile, please turn on Boxed to Full Width option under Theme options > Responsive section.

kayaker89 · July 2016

Thank you, I am on full width mode with my theme and it still has so much padding on the sides. I increased pixels to 1300 and it looks good now but I think it is too high pixels, my website will be slow to load. I would ideally like to have 1150 pixel size and use a custom CSS to increase me margins or decrease me padding on left and right side. Any info on this?

Where to post CSS code? Thank you for all your help!

Albert · July 2016

Please show us on screenshots where those large margin are because we do not see such.

But the css codes should be pasted under Theme options > Custom CSS & JS > Custom CSS section.

Please help! Margins, header and footer image not working.

Comments