Top of page

[Laura]

Several questions relating to the top of the page:

1. On the homepage, I have a good amount of text as the heading / description for my slider. If I use the "general setting" to add a logo or display the site title & tagline, it doesn't push the slider heading/description down the page, and instead the two go over the top of each other. How can I add the logo or site title / tagline and have it appropriately adjust the other content down? (See screenshot.)

2. On a single page, the page title displays over the header image, then there is a space gap of brown, and then the page content floats on a white box. Is there a way to float the white box higher on the page so that there isn't so much of a space gap between the page title and the content?

3. On a blog post, the post title displays over the header image, but then repeats at the top of the white box. Is it possible to float the white box higher, and remove the page title over the header image so it doesn't appear twice? (Less desirable but could also work: remove the post title from the white box.)

Thank you so much for all your support! It's much appreciated.

 

[karrtik]

Hello there,

1) Please this code in the Customize > Additional CSS

.NovelLite_slider .container h1 {
    font-size: 42px;
}
.NovelLite_slider .container p {
    font-size: 14px;
}

This code will decrease heading and paragraph font size. Also please decrease logo image size.

For 2, 3) Please share your site link.

Thank you

 

[Laura]

Thanks for the CSS resize. The logo now works on web, but on mobile, it still goes over the top of the slider text.

Site is www.lauraforsuperior.com.

And one more question while you are looking. Although I have set a background image for the "blog" section of the slider, it's not showing up; it is defaulting to the background color instead. I've tried changing the image, uploading a new one, and also inspecting elements but I can't figure out what the problem is. Can you help me get the background image to show up instead of the color?

 

[karrtik]

Hello there,

1. I have checked your site and logo is not covering text in mobile view. Is your issue resolved.

2. For blog section issue try this code

#section3:before {
    background: rgba(190, 160, 124, 0);
}

This will help you.

Thank You

 

[Laura]

1 - The logo still shows over the text; see screenshot from my phone.

2 - Thanks for the code! Once I saw the issue was the background, I was able to fix without touching the custom CSS, by changing the background color in the interface. I hadn't realized that once I selected an image, the background color overlay would still apply - wanted to make sure I noted that for anyone else looking for help.

I also still need help with 2 and 3 from my list in the original post (gaps in single page / single post), for which the site link is lauraforsuperior.com.

 

[karrtik]

Hello there,

1. For that please try this code

@media only screen and (max-width: 480px){
.NovelLite_slider .container h1 {
margin-top:80px;
}
}

2. and 3. Use this code

.single-post .page_heading_content h1 {
display:none;
}
.single-post .page-content {
margin-top:0px!important;
}

This will help you.

Kind Regards

 

[Laura]

This worked perfectly for individual posts, but not for pages. I tried to inspect various elements but I couldn't identify what is still causing the gap on the single pages? It is not a big deal if it can't be changed.

Thank you again!

 

[karrtik]

Hello there,

For that please try this code by removing previous code.

.page_heading_content h1 {
display:none;
}
 .page-content {
margin-top:0px!important;
}

This will help you.

Kind Regards

 

[Laura]

Wonderful, thank you! All set.