Tagged: x
-
AuthorPosts
-
March 14, 2017 at 11:50 am #1406727
Hello
1 I am working on the UI design for a website, I purchase the theme and start playing around with the website. I do have a question related to the structure of the website. I want to achieve an overlapping body container over the header. I am not sure yet if I will use a revolution slider or a simple container header and I may use envira gallery on my body container however, I want to achieve something like this https://designit.com/ (attached images) it has to be responsive as well.
I was reading a post (https://community.theme.co/forums/topic/creating-a-body-container-that-overlaps-slider-header/) and your team suggested this css code:#x-section-1 {
position: fixed;
top: 0;
}
#x-section-2 {
padding-top: 60% !important; /*Adjust this accordingly*/
}I was trying to test it on my side but not sure I am on the right path also for responsive. What it is your advise on it?
2 Also in term of responsive text, what do you suggest is the best way to go for so that I will have a responsive text on all the website
Carlo
March 14, 2017 at 10:09 pm #1407511Hi Carlo,
Thank you for writing in! First things first, please remove the STYLE you applied on the first section and the second section. Particularly this
#x-section-1 { position: fixed; top: 0; }
And this:
#x-section-2 { padding-top: 0; }
You might need to completely set the second section’s top padding to 0, currently it has a 45px top padding, put a 45px padding on its ROW instead. Also set the second section’s background color to transparent.
Only then add this on your custom CSS
@media (min-width: 980px) { .overlap { max-width: 78%; margin: -100px auto 0 !important; } }
Adjust the value accordingly. Then add the class overlap on the second section.
Let us know how it goes.
Cheers!
-
AuthorPosts