Mobile optimization for website

Hi
I would like to optimize my website (www,cardiomiopatiaipertrofica.info) for mobile screen
In particular I would like to put

  1. the log on the top
  2. menu in the middle
  3. sliders fitting mobile screen
  4. title and subtile fittin mobile screen

thanks for your help

gianni

Hello Gianni,

Let’s address the first two to help us assist you better. Try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      .site-header .header-wrap > a {
        position: static;
        display: block;
        text-align: center;
        margin-left: 0;
      }
      .site-header .col-md-4,
      .site-header .col-md-8 {
        width: 100% !important;
      }
      .site-header .col-md-8 .btn-menu {
        float: none;
        margin-left: auto;
        margin-right: auto;
      }
    }

    @media only screen and (max-width: 540px) {
      .site-header .header-wrap > a > img {
        max-width: 90%;
      }
    }

Regards,
Kharis

ok thanks
now logo and menu are centered
what aout image sliders and title subtitle?
thanks

Try enabling full screen slider by going to Appearance > Customize > Header area > Header Slider > Slider mobile behavior.

Regards,
Kharis

Hi

It has improved but still not working, backgroung images and titles are not fitting
thanks

gianni

Hello Gianni,

Try adding this CSS code to Additional CSS. This will reduce the slide text size on specified maximum device’s screen size.

    @media only screen and (max-width: 991px) {
      .header-slider .maintitle span.title1 {
        font-size: 18px;
      }
      .header-slider .maintitle span.title2 {
        font-size: 26px;
      }
      .text-slider .subtitle {
        font-size: 26px;
      }
    }

Regards,
Kharis

Thanks a lot that worked
Why did you use exactly 991 px?

All the best

Gianni

Hello there,

I assumed that 991px is width of portrait tabled screen.

Regards,
Kharis