Navigation
Archive / Changing a specific header to fit on one line on mobile devices
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • May 20, 2016 at 7:39 am #1001406
    SixIT
    Participant

    Hi guys,

    I’m wondering if you can help me. I have a header on my homepage “The UK’s Number 1 Walkthrough Wildlife Adventure”. I like the way it looks on desktop, but I would like it to appear on one line rather than two on mobile devices (I’ve attached a screenshot of what I’d like it to look like). Is there a way to do this?

    My url is http://4a0.faf.myftpupload.com/

    Thanks in advance!

    May 20, 2016 at 8:49 am #1001522
    Joao
    Moderator

    Hi There,

    Please add the following code to your Appearance / Customizer / Custom /CSS

    @media only screen and (max-device-width: 480px) {

.home .x-column .x-sm .x-1-1 {

font-size: 9px;

 } }

    Hope that helps,

    Joao

    May 20, 2016 at 9:28 am #1001568
    SixIT
    Participant

    Hi Joao,

    Thanks for the quick response. That hasn’t worked, i tried adding an !important tag to it and that has worked either. Do you have any more suggestions?

    Many thanks!

    May 20, 2016 at 12:54 pm #1001887
    Darshana
    Moderator

    Hi there,

    Please try adding the following CSS rule instead. 

    
@media (max-width:480px) {
  .home #x-section-1 .x-text > h3 {
    font-size: 150%;
  }
}

    Hope that helps.

    May 20, 2016 at 2:22 pm #1001998
    SixIT
    Participant

    That’s worked perfectly, you guys are awesome! Thanks very much!

    May 20, 2016 at 8:40 pm #1002431
    Friech
    Moderator

    We’re delighted to assist you with this.

    Cheers!

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1001406 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>