MAGEEWP

Themes for WordPress

MAGEEWP

Themes for WordPress

Homepage Forums Meris & Torch & Cordillera Theme Slider text not responsive on mobile

This topic contains 6 replies, has 5 voices, and was last updated by  joellopes 1 year ago.

  • Author
    Posts
  • #17923

    salavian
    Participant
    • Topics: 2
    • Replies: 3
    • Total posts: 5

    Hi,

    I’m having a problem with my website: https://puzlook.com.au in mobile. The text on mobile doesn’t look fit/adjusted.
    Could you please let me know how I can fit the text on mobile devices? Many thanks

  • #17972

    Arthur Sereno
    Keymaster
    • Topics: 2
    • Replies: 1517
    • Total posts: 1519

    <span style="font-size: 48pt;line-height: 106%;font-family: Moon;color: #ffc000">L I T T L E &nbsp; D S L R &nbsp; I P H O N E&nbsp;</span>

    Don’t insert style like above, try delete them which style="font-size: 48pt;line-height: 106%;font-family: Moon;color: #ffc000",
    especially the font-size.

  • #17981

    salavian
    Participant
    • Topics: 2
    • Replies: 3
    • Total posts: 5

    Thanks for reply. Should it be replaced with something? I’ve tried deleting it from the ‘award winning slide’ and ‘colourful’ but didn’t help much! Still doesn’t fit the mobile screen! also desktop is now messed up. Thanks in advance.

  • #18039

    Arthur Sereno
    Keymaster
    • Topics: 2
    • Replies: 1517
    • Total posts: 1519

    Strange, Could you show the codes you used in the slider?

  • #21395

    gokhany
    Participant
    • Topics: 2
    • Replies: 3
    • Total posts: 5

    Hello, I have the same issue how did you solve it ?

  • #43265

    rachi
    Participant
    • Topics: 0
    • Replies: 1
    • Total posts: 1

    Hi Arthur,
    I love Meris Theme but I have the same issue of Salavian with the slider. On mobile – in portrait mode – the slide is cut until I can see only the button but not the image and the text.
    The size of my image is 1920 x 1100 pixels and the code that I use is like that:

    <h1>CO<s>S</s>A <strong>FACCIAMO</strong></h1>
    <button>Dimmi di più >></button>

    ***SORRY****
    I solved in part the problem with the resize of the logo – now 102×50 pixel. But the text is still cut if I use two words instead of on – ex. Cosa facciamo.
    There is something I can do?

    Tnx, Rachi

    • This reply was modified 1 year, 3 months ago by  rachi.
  • #48791

    joellopes
    Participant
    • Topics: 0
    • Replies: 1
    • Total posts: 1

    Hi,
    There is some custom CSS that I used to minimize this problem in mobile devices.
    You can use it in Custom CSS box ou in Your child theme css:

    .homepage-slider .carousel-caption h1 {
      font-size: 2.1em;
    }
    
    @media only screen and (max-width: 600px) {
      .carousel-caption {
        position: initial;
        background-color: #efefef;
      }
      .carousel-indicators {
        display: none;
      }
     .homepage-slider .carousel-caption h1 {
        font-size: 1.2em;
      }
    }
    
    @media only screen and (min-width: 601px) and (max-width: 1024px) {
      .homepage-slider .carousel-caption h1 {
        font-size: 1.4em;
      }
    }

You must be logged in to reply to this topic.