Home Forums Pro Themes Bizlight Pro Bizlight Pro- Mobile

This topic contains 3 replies, has 2 voices, and was last updated by  wensolutions 1 year, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #53875

    Lauren
    Participant

    Hello,
    I am working on a website- zappemnow.com

    When the site collapses to mobile, the logo is not centered. I was wondering how I can alter the CSS to center the logo in mobile while still keeping its current position on desktop. Is there a way to further reduce the blue background height as well on mobile? I would like the area to be thinner if possible.

    Also, the main featured image on the home page crops from the recommended size in the theme details. When it transitions to mobile, it becomes a very thin sliver. Is the height of the featured image in mobile and desktop able to change to prevent such tight cropping?

    Thanks so much!

    #53933

    wensolutions
    Keymaster

    Hello @laurendro,

    To make the logo in the header centered in the mobile devices only, please paste in the following custom CSS in your Admin Dashboard > Appearance > Customize > Additional CSS :

    @media(min-width:769px){
    .site-header.evision-nav-right {
      
      text-align: center;
    
    }
    
    .nav-holder {
        margin-top: 0px!important;
    
    }
    
    }

    This will also decrease the header blue bar in mobile devices.

    Regarding the image size in featured slider

    While inspecting your Website URL, it is seen that the featured image used in the front page also contains text in the image itself, this makes the image area shrink as the theme initially has caption / button in the layout. It is highly recommended to use the slider layout with caption to get the proper sizing.

    If you wish to increase the slider size with the current image however, please add in the following Custom CSS :

    .evision-main-slider .slide-item {
        padding: 80px 0;
    }
    
    .thumb-overlay {
       display: none;
    }

    Hope This helps,

    Best Regards !!

    #53976

    Lauren
    Participant

    Thanks for your help!
    For some reason the CSS is not working for either of the issues. The logo in mobile is much more important than the slider.

    The only reason I did not use the text option within the customize section for the slider is because I do not want it to link to a page, and I could not find a way to just make it static.

    #54057

    wensolutions
    Keymaster

    Hello @laurendro,

    To make the logo in the header centered in the mobile devices only, please try using the following custom CSS in your by adding it to your Admin Dashboard > Appearance > Customize > Additional CSS :

    @media(max-width:995px){
    
    .site-header.evision-nav-right {
        text-align: center!important;
    
    }
    
    }

    Hope this Helps,

    Best Regards !!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.