Docs

[Huseyin T]

Hello again,

I have managed to duplicate sections the other way round for mobile devices (hiding etc) so i have got this resolved now, enabling image to sit on top now instead of underneath text .. phewww !!

I know i said i would leave you alone, but i am sorry i cannot cut corners here, i need to tap your brain again !!

You gave me code (see above from jade) for the telephone numbers sitting on top of each other in the header which was great !! All i need now is the words Book Now to sit on top of the numbers in the header. See below.

Book Now
0121 426 3734
07811 511 681

And finally one more thing; how can i reduce nav bar, header thickness on mobile devices as on mobile devices it appears way too thick.
See for yourself on mobile device: My site: http://s622430481.websitehome.co.uk/

You guys are great, i owe you all a beer!!

Kindest Regards

Huseyin

[Jade]

Hi Huseyin,

Please update the code to:

.x-brand:after {
    content: "Book Now 0121 426 3734 07811 511 681";
    letter-spacing: 0;
    color: #fff;
    float: right;
    margin-top: 15px;
    max-width: 120px;
    text-align: left;
    line-height: 1.2em;
}

This code in the customizer:

.x-btn-navbar {
    margin-top: 125px;
}

Is adding the space in the header. Is there a specific purpose of the code why you added it? You could simple remove it. Or you can add this code:

@media (max-width: 980px) {
    .x-btn-navbar {
        margin-top: 10px;
    }
}

Hope this helps.

[Huseyin T]

Hi there,

What css code would i need to set my site up so that when viewed on tablets, mobiles etc, the whole page just shrinks down to fit the device and then has to be zoomed in on?

I would rather have people zoom in if they choose as i feel it looks better un-responsive, if that makes sense?

My site – http://s622430481.websitehome.co.uk/

Thanks alot for your time..

Huseyin

[Joao]

Hi There,

What you are describing is Non Responsive website, that is how the websits worked before, google penalizes websites that work this way nowadays so I don´t think it is a good choice.

Your wesbite looks good on mobile, it is a bit hard to read because of the font you choose, it is a beautiful font but it is not really easy to read. We can make the text smaller if you want but that would make things better for you.

Please try adding the following code to Appereance Customizer Custom CSS and see how you like it:

@media only screen 
and (min-device-width : 481px) {
.home .cs-ta-justify {
    font-size: 16px;
    padding-top: 40px;
}
.home h1,. home .h1 {
font-size: 20px;
}
}

Hope it helps

Joao

[Huseyin T]

Great, thanks Joao,

I will take that into consideration regarding google and responsive sites..

Also. What would i have to do to increase the font size of my service pages titles in the scroll down menu??

I have attached a screen shot to explain.

Thanks again, you guys are very much appreciated for your speedy support..

Huseyin

[Joao]

Hi There,

Add the following code to Appereance CUstomizer Custom CSS :

.masthead-inline .x-navbar .desktop .sub-menu {
font-size: 19px;
}

Let us know if you need help with anything else.

Joao

[Huseyin T]

Brilliant Joao,

You are a star.

By the way you were right?? I think i should keep it responsive going by Google and their requirements for mobile sites?? so my question is, how can i reduce the gaps in my text when viewed on a mobile device?? as if you look there are huge spaces between words which really ruins it..?? looks unprofessional.

Thanks Joao

Huseyin

[Rue Nel]

Hello Huseyin,

Thanks for the updates! To reduce the gaps of the text in your site when viewed on mobile screens, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 767px){
  .cs-content .x-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }   

  .cs-content .x-section p{ 
    letter-spacing: -1px;
    text-align: left !important;
  }
}

Hope this helps.

[Author]

Posts