Tagged: header
- This topic has 5 replies, 2 voices, and was last updated 1 year, 6 months ago by
tikaram.
-
AuthorPosts
-
February 12, 2023 at 8:21 pm #315730
SwiftyRox
ParticipantHello….How would I go about removing the crowding of the header image across platforms. Obviously there is a balance that must be determined as different resolutions will garner different results, but I’m trying to figure out how to create more space between the header banner and the header image when it comes to mobile. I have manually added a buffer to the image itself, but there surely must be some CSS Code to stop some of the overlapping that occurs after tweaking it to look good online, but not on a phone in portrait mode…Bring up the site below on your phone, and you’ll see the menu button and site identity logo are crowding the header image…I can add more buffer to the image to defeat this, but it ends up crowding the browser views…
http://www.classickingdombookings.com
February 13, 2023 at 12:06 am #315734tikaram
Participant@swiftyrox : Login to your WordPress admin section. Go to Appearance => Customize => Additional css and add the following css.
@media only screen and (max-width: 600px) { .header-image-slider { margin-top: 30px; } }
Let me know if this helps you out.
Regards,
TikaramFebruary 13, 2023 at 3:56 pm #315741SwiftyRox
ParticipantDoesn’t seem to make a difference at all on the phone…..Menu Button is overlapping the header image, and the site icon is in danger of doing the same….I published the Additional CSS from the Theme Customization options and not changes were experienced…
I currently have the following CSS added….could your CSS be conflicting with something else here?
body:not(.home) #ct-tours-4 { display: none; } .tour-dates ul li:nth-child(3n) { text-align: left; } body.header-bg { padding-top: 75px; } @media only screen and (max-width: 600px) { .header-image-slider { margin-top: 30px; } }
February 14, 2023 at 12:55 am #315757tikaram
Participant@swiftyrox : I checked your site from a mobile device. I have added the screenshot below. Please try clearing the browser cache at your end and let me know.
Regards,
TikaramFebruary 14, 2023 at 7:42 am #315773SwiftyRox
ParticipantThank you….I’m not sure why I wasn’t seeing it yesterday, but the phone is showing the layout as you screenshotted. We’re good to go!! Much appreciated!! 🙂
February 15, 2023 at 1:56 am #315791tikaram
Participant@swiftyrox : Glad to know that the issue has been resolved. Let me know if you have any more issues.
Regards,
Tikaram -
AuthorPosts
- The topic ‘Header Crowding’ is closed to new replies.