Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #315730
    SwiftyRox
    Participant

    Hello….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

     

    #315734
    tikaram
    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,
    Tikaram

    #315741
    SwiftyRox
    Participant

    Doesn’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;
     }
    }
    #315757
    tikaram
    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.
    Screenshot-2023-02-14-11-34-02-93

    Regards,
    Tikaram

    #315773
    SwiftyRox
    Participant

    Thank 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!! 🙂

    #315791
    tikaram
    Participant

    @swiftyrox : Glad to know that the issue has been resolved. Let me know if you have any more issues.

    Regards,
    Tikaram

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Header Crowding’ is closed to new replies.