Making my site mobile/tablet friendly

  • Hi,

    My website is showing up perfectly on laptop/computer screens, but it’s not showing up so great on both tablet and mobile screens.

    Screenshot computer screen view. Text is showing up evenly big, logo is nicely sized according to context. All good!

    Screenshot tablet screen view. Text in the slider part is smaller than the regular text (under ‘Diensten’), the slider image itself is rather small, and the logo is rather big for the page. Not so great.

    Screenshots mobile screen view. The text in the slider is tiny, the slider image itself is too small and the logo is too big/takes up too much of the page. Really bad.

    So is there any way I can adjust the logo, slider and slider text size according to the size of the screen that’s viewing it? I have a prospective client tomorrow that I’d like to show my website to on a mobile screen, but it won’t look good if I do with the way it looks now. Any advice or article links or anything would be appreciated! ??

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

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi, zuci

    To do this add the below CSS code inside the Appearance >> customzier >> General setting >> Custom CSS box: 

    @media only screen and (min-width: 0px) and (max-width: 767px)
{
    .navbar-brand img {
	width: 120px !important;
	height: 110px !important;
    }
    .slide-caption h2 {
	font-size: 1.5rem !important;
    }
    .slide-caption p {
        font-size: 1.2rem !important;
     }
     .slider  img{
	height: 220px !important;
	width: 100% !important;
     }	
}
@media only screen and (min-width: 768px) and (max-width: 1200px) {
  .navbar-brand img {
    width: 120px !important;
    height: 110px !important;
  }
  .slide-caption h2 {
    font-size: 2.0rem !important;
  }
  .slide-caption p {
    font-size: 1.9rem !important;
  }
  .slider  img{
     height: 400px !important;
     width: 100% !important;
  }
}

    I hope this will work for you!

    Note: You can change the attribute value according to your needs.

    Thanks

    Thread Starter zuci

    (@zuci)

    Hi Amit Gupta,

    Thank you so much for your thorough answer, this worked! It looks great now!

    Very big thanks for your work and time ??

    Greetings,
    Zuci

    Hi,

    Glad to help you!

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Making my site mobile/tablet friendly’ is closed to new replies.