Spacing Issue on Pages versus Posts

Illdy
1

Greetings…would you please help me to resolve 2 spacing issues with my header image on my blog www.raneydaydesigns.com?

My PAGES posts have a large gap in between the sticky menu and the header image. I would like to remove that gap (maybe a padding issue?) so that the space between the menu and the image looks like it does on my POSTS pages (see attached photos for further clarification).

The following CSS allowed me to display my header image completely and without distortion on my PAGES posts:

#header .bottom-header.blog {
padding: 360px 0;
padding-top: 330px;
}

Unfortunately this CSS as written did not extend to my POSTS. Will you please help me add to the existing CSS or provide new CSS to make the header image completely visible on my blog POSTS as it is in my Pages?

Much Thanks!!

2

I worked a great deal on this last night and thought I resolved the gap on the PAGES issues. It looks perfect on my 15" laptop. However, I looked on our 27" desktop this morning and the image is completely cutoff. I suspect that gap on my laptop was there because when I initially added the image, I did my programming on the big desktop and that extra space was needed for that device. Furthermore, when I look on my phone, the whole website is a mess with pretty much blank screen and no images (plus it takes forever to load).

This may end up being more of a general newbie CSS question. When I am adding custom CSS, do I need to be add specialized CSS PER device that may access the site (ie. Here’s CSS 1 to make the image look correct on a mobile, here’s CSS 2 to do the same on a laptop, here’s CSS 3 to do it on a large desktop)? This is likely a larger question than you can help me fix independently on my site, but do you have a link, article(s), other resources to direct me to to help educate myself on the coding process across multiple devices?

AND/OR, is there a general CSS “fit to screen” for header images so to speak that would work across the whole gamut of devices out there?

3

Hey there,

I hope you are well today and thank you for your question.

Can you provide the URL to your website so we can have a look at the issue?
I went here but this doesn’t reflect the screenshots sent. http://raneydaydesigns.com/

Best regards,
Support.

4

My apologies. That was the wrong link. The correct URL is foraraneyday.com and please note that I just edited the note above your reply to reflect an attempt I made this morning.

5

Hello there,

I hope you are doing well today.

You can use the following CSS code to reduce the gap by going to Appearance > Customize > Additional CSS and pasting it there.


#header .bottom-header.blog {
    padding-bottom: 0px;
}

Best Regards,
Support