Title and header image issues on mobile

  • passiveinc

    (@passiveinc)


    6 years, 2 months ago

    Hi,

    I am using the Nisarg theme. The header of the website looks great on a desktop computer. However, when I view my webpage on my smartphone, the header is not visualized correctly. In particular:
    a) The Site title appears twice, above and in the header image.
    b) The title in the header image is too large so that both the site title and tagline go beyond the header image.

    My questions:
    1) Should there be a special configuration for desktop and mobile (I would like to keep the desktop settings but only change the mobile visualization)?
    2) I don’t think it makes sense for the site title to appear both in the header image and above the header image. How can I remove the site title that appears above the header image?
    3) How can I reduce the font size for the site title in the header image?

    Thank you.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • lilleulven

    (@lilleulven)

    6 years, 2 months ago

    Hi @passiveinc

    What I did, to improve the mobile view is the following addition to my Custom CSS (Customize -> Additional CSS, when you are looking at the blog and not the Dashboard)

    @media (min-width: 768px) {
  .navbar-collapse {
 	  min-width: 768px !important;
   }
}
	
@media (max-width: 767px) and (min-width: 360px){
  .site-header{
	    height: 220px !important;
	  }
}

@media (max-width: 979px) and (min-width: 768px){
  .site-header{
	    height: 302px !important;
  }
}

@media (max-width: 1279px) and (min-width: 980px){
  .site-header{
	    height: 315px !important;
  }
}

    That changes the size of the of the header to fit better for mobile devices (in my opinion). As you can see, I am using the @media-clause with different min- and max-width values, these address the different sizes of the displays, so you only need CSS and not some other miracle-tool to change the mobile vizualization.

    Remove the site title from above the header image by adding this to the same Additional CSS:

    .navbar-brand {
    display: none !important;
}

    Change the font size for the site title in the header image by adding this (also to Additional CSS):

    .site-title{
font-size: 16px; /*change the number of px to something you like*/
}

    Hope this helps.

    Regards

    Wiebke / Lille Ulven

Viewing 1 replies (of 1 total)

The topic ‘Title and header image issues on mobile’ is closed to new replies.