Mobile theme CSS

  • Author
    Posts
  • #76530

    Hello, Could I have some help with editing the mobile theme for my site brukeropenpath.com? I have tried diving into the css myself but have not gotten anywhere (I am a beginner). The header image, top navigation bar, and slider seem to be the main issues on mobile. I would like the header to take up the whole space as it does on the computer screen and for the top navigation bar to stay in the same format: all links in one line positioned directly above the slider. I don’t know where to begin with the slider, but if it could look and function exactly the same way as it does on the computer that would be ideal. Hopefully this all makes sense? I appreciate your help!

    The blog I need help with is: (visible only to logged in users)

    #76637
    neeraga1
    Theme Author

    Hello,

    Appreciate your quick response.

    Kindly apply the below CSS:

    @media only screen and (max-width: 767px){
    .featured-slider .slider-nav{
    background: transparent !important;
    }
    
    .featured-slider .slider-nav li.active a{
    background: transparent !important;
    border-bottom:none
    }
    }
    
    @media only screen and (max-width: 480px){
    .header .logo img{
      max-width: 143%;
      margin-left: -43px;
    }
    .header .contactinfo span.calldetails{
      margin-left: -58px;
    }
    }
    
    @media only screen and (max-width: 767px) and (min-width: 480px){
    .header .logo img {
      text-align: center;
      width: 310px;
    }
    
    .header .contactinfo {
      margin-top: 3px;
      margin-left: -100px;
      }
    }

    put the above CSS in Dashboard–>>Appearance–>>Customize–>>CSS

    Hope it will fix your issue.

    Let me know for further doubts, will be glad to assist you.

    #76697
    jaclynpieleski
    Member
    Original poster

    Hello, thank you for the help! I think it made some difference, but the header is still too far above the “innovation with integrity”. Is there a way to decrease the space in between them? Also, can we hide the “back” and “next” showing up on the slider? Other than those two things, the mobile version of this site looks pretty good. The one other thing I notice is on the literature downloads page the four thumbnails are not all lined vertically so two of them are cut off. If we could fix this as well that would be perfect! Thanks again!

  • The topic ‘Mobile theme CSS’ is closed to new replies.