It looks ok in computer but awfully in mobile devices


#1

I’ve made this site at: http://clinconf2016.gr/ (it’s in Greek)
But even if it looks ok in computer it look awfully in mobile devices!
I tried 4.5” phones and a 7 inch google nexus tablet. They both it look awful,
text is not auto-fit by getting smaller in FrontPage and even worst in inner pages
Title – subtitle text on top is getting out of the space defined for header when in mobile device resulting the menu to disappear and not been visible at all.
So not even navigation in inner pages. I’m sorry but this is not what I can call responsive design. I know there is allot of text but even in this case should be presented somehow.
Thank you for your time


#2

Hi, sorry for delay.

The site title and site description is too long, that is what caused the header section overlapped. But you can try to add this css code below using custom css plugin to reduce the font size of the text:

.btn-menu {
  text-shadow: 2px 2px 2px #000;
}

.text-slider .subtitle {
    font-size: 16px;
}

@media only screen and (max-width: 767px){
  h1.site-title {
    font-size: 20px !important;
  }

  h2.site-description {
    font-size: 14px !important;
  }

  .text-slider-section {
    top: 70%;
  }

  .header-image {
    height: 290px;
  }

  .page-wrap {
    padding-top: 15px;
  }
}

@media only screen and (max-width: 1024px){
  h2.site-description, .text-slider .subtitle {
    font-size: 18px;
  }

  .text-slider-section {
    top: 70%;
  }

  .header-image {
    height: 260px;
  }

  .page-wrap {
    padding-top: 15px;
  }
}

#3

thank you
it’s ok now.
anyway i still believe that this should be the default behaviour in your theme.


#4

Hello,
i would like to if possible to tell me the css code to make also the subtitle font biger along with site-title.
thank you