Mobile website doesn't look good

  • Unknown's avatar
    vandenheuvelkjeld · Member ·

    Hi everyone,

    My website looks bad on mobile.

    https://corkcyclingcampaign.wordpress.com

    I would like to have the big text much smaller, and the testimonial smaller.

    The body text could also be smaller for my taste, and the padding near the edges.

    The blog I need help with is https://corkcyclingcampaign.wordpress.com.

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, let’s start with this. In this I’ve focused mostly on your main page. Let me know where else you wish to make changes, and you can adjust the font sizes as desired. 

    @media screen and (max-width: 600px) {
  .wf-active #hero .hentry .entry-title {
    font-size: 35px
  }
  .hentry h3 {
    font-size: 16px;
    line-height: 1.3;
  }
  .single-testimonial {
    padding-left: 15px;
    padding-right: 15px;
  }
  body:not(.search) #page .jetpack-testimonial.hentry .entry-content, .jetpack-testimonial-shortcode .testimonial-entry-content {
    padding-left: 60px;
  }
  .homepage-widgets .widget .widget-title {
    font-size: 25px;
  }
  .footer-widget-area .col-md-4 {
    padding-left: 40px;
    padding-right: 40px;
    text-align: center;
  }
}
  • Unknown's avatar
    vandenheuvelkjeld · Member ·

    This is great! Very much appreciated. Now I would like to do the following small things.

    Centre the logo on the home page and make it a bit larger. (mobile)
    Make the body text and the page titles smaller (mobile)

  • Unknown's avatar
    thesacredpath · Member ·

    Give this a try for the logo and the body text and titles. You can adjust the font sizes as desired 

    @media screen and (max-width: 600px) {
  #masthead .site-branding {
    max-width: 100%;
    width: 100%;
  }
  .wf-active body {
    font-size: 14px;
  }
  .entry-content h1 {
    font-size: 20px;
  }
}

    You can also add the above declarations to the other Media Query so that they are all in one place, if you want to.

  • Unknown's avatar
    vandenheuvelkjeld · Member ·

    Awesome! I also figured some stuff out myself.

    -Is it possible to hide the featured images in the pages except the home page?
    – To make the testimonial boxes a fixed size? (thats scalable of course)?

  • Unknown's avatar
    vandenheuvelkjeld · Member ·

    and make the social media icons at the top a bit bigger on mobile?

  • Unknown's avatar
    thesacredpath · Member ·

    This hides the featured images everywhere except for the home page. 

    body:not(.home) .entry-thumb {
  display: none;
}

    For the social icons at the top on mobile, the size reduction happens on 992px and narrower screens. This will allow you to adjust those. 

    @media screen and (max-width: 992px) {
  #masthead .main-header-links, .social-list li a::before {
    font-size: 16px !important;
  }
}

    Not sure I understand what you want with the testimonials boxes. Can you explain a bit further?

  • Unknown's avatar
    vandenheuvelkjeld · Member ·

    I mean, now the testimonial boxes are the size of the text + padding: 14px 14px 28px 30px;. Is it possible to make it a standard size, independent of the amount of text in the box?

  • Unknown's avatar
    thesacredpath · Member ·

    Ah, thanks. We can set a minimum height for them with the following, but if the length of the content in the testimonials change, it could cause things to go awry again. 

    .single-testimonial .entry-content {
  min-height: 100px;
}
  • Unknown's avatar
    vandenheuvelkjeld · Member ·

    Incredible!!

    The last thing is to un-goof the search icon on desktop. Is there like an upper margin/padding thingy that doesn’t affect mobile?

    And is there something i can help u with? on linkedin or something, just to thank you?

  • Unknown's avatar
    thesacredpath · Member ·

    Awesome, glad we are getting things how you want them. For the search icon, this adjusts the icon location for screens 993px and wider. 

    @media screen and (min-width: 993px) {
  #header-search-button::before {
    position: relative;
    top: 6px;
  }
}

    Thanks a lot for the offer, but I get a lot of pleasure out of helping people get their sites looking just the way they want them to look.

  • Unknown's avatar
    vandenheuvelkjeld · Member ·

    Awesome, thanks you so much!

    Consider this topic closed

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘Mobile website doesn't look good’ is closed to new replies.