- This topic has 11 replies, 2 voices, and was last updated 4 years, 4 months ago by
.
-
Posts
-
The header image for sub-pages is 1920 x 580 but when you view a sub page the height is huge and full screen.
Is there some custom CSS I can use to set the header image height?
Hello,
As for now, to reduce the height of image, please add following given CSS code in Additional CSS section by going to Admin Panel > Appearance > Customize > Additional CSS
#page-site-header { padding: 0px; height: 80vh; }You can replace ’80vh’ with your desired pixel.
Hope this helps.
If you have any queries further, let us know.
Thank you.
Thank you so much for the quick help. It worked perfectly.
I just have one other little issue I can’t figure out. On the home page of https://coltonmclauchlin.com/ the main image is not being mobile responsive (it’s not sizing down on mobile devices). Images on the rest of the site pages work fine.
What am I overlooking?
Correction, it is scaling down on mobile devices but the person in the pic gets “lost” on phones because he is on the far left.
Is there some CSS I can use to have the entire pic scale down as a whole so the entire pic stays viewable?
I tried this but it didn’t work. Mind you, I am not versed in CSS. 🙂
#featured-slider {
width: 100%;
height: auto;
}Hello,
Please add following given CSS code to solve the issue in Additional CSS section by going to Admin Panel > Appearance > Customize > Additional CSS
@media screen and (max-width: 768px){ .home .featured-slider article{ background-position: initial; } }Hope this helps.
If you have any queries further, let us know.
Thank you.
1. For the mobile version of https://coltonmclauchlin.com is there a way to have the hamburger menu below the logo instead of on top so the logo isn’t covering the top of my head?
2. How can I make the menu background solid black instead of transparent?
Hello,
Regarding changing the position of hamburger menu in mobile view section, Please add following given code:
@media screen and (max-width: 414px){ .wrapper .site-menu{ display: flex; flex-direction: row-reverse; } }Also, Please add following given code to make the menu background solid black instead of transparent.
.wrapper .main-navigation{ background-color: #08090a; } @media screen and (min-width: 1024px){ #social-navigation{ background-color: #08090a; float: none; } }Hope this helps.
If you have any queries further, let us know.
Thank you,
You guys are awesome!
One last thing. How do I make the black menu background full width and cover all the way to the top so it’s a black bar across the entire top? It also seems to be missing a line of black under social navigation.
Thanks!
Hello,
To make the black menu background full width, please add following given CSS code:
.site-header{ background-color: #08090a; } @media screen and (min-width: 415px){ .site-header{ padding-top: 10px !important; padding-bottom: 10px !important; } }Please remove the code we have provided earlier.
Hope this helps.
Thank you.
- You must be logged in to reply to this topic.
