Two questions for mobile version

  • ksully913

    (@ksully913)


    8 years ago

    Hi there!

    I appreciate your help so far. Right now I’m just dealing with two small tweaks I need to make on he mobile version of the site if possible. The site name is too long to fit in line with the menu icon. Is there a way to adjust the weight of the font or the kerning of the letters so it fits?

    I would also like the main info on the top over the image to be centered. We are not using sub text so right now it is showing up on the top of the image on mobile and the bottom half is empty. Would love to have it centered.

    Site is https://www.equinecareernetwork.com for reference. Thanks!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • jjchrisdiehl

    (@jjchrisdiehl)

    Hi Ksully

    For the title, add this to your stylesheet:

    @media (max-width: 425px){
    a.navbar-brand.text-logo {
        text-transform: uppercase;
        font-weight: bold;
        font-size: 150%;
}
}

For the second part:

    @media (min-width: 320px)
    .frontpage-banner.image-banner.frontpage-banner .block-title {
    font-size: 24px;
    position: relative;
    top: 1em;
    }`

    Basically, you will need to adjust these values using media queries so that the content fits just right. That is the least invasive way of doing it.

    Hope this helps!

    Thread Starter ksully913

    (@ksully913)

    THANK YOU. I can’t tell you how much the site title was bothering me on mobile. Looks so much better now.

    The second one didn’t quite work. If it matters, we don’t need that site banner text on any version of the site, it’s just a more obvious problem on mobile. Is there a place I should remove it in the PHP?

    Let me know what you think would be best.

    Kelsey

    jjchrisdiehl

    (@jjchrisdiehl)

    Hey ksully, glad the first problem is solved. For the second, if you right click the text in Chrome and go to Chrome Inspector, you will be able to see the class that affects that particular block of text. From what I can tell, the class .block-title seems to be the css class that is positioning the text. If you add “top: 1em;” to .block-title you should be able to center the text a bit better. If you click on the css code in the Chrome Inspector you can adjust it live in the browser and see the effect for yourself.

    Theme Author lyrathemes

    (@lyrathemes)

    @jjchrisdiehl thanks for helping!

    @ksully913 can you show me with a screenshot what you’re trying to do with the main header? The text is already “almost” in the center (20px difference between top and bottom). I can help you tweak that but I want to be sure of what you need.

    Best regards,
    LyraThemes

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Two questions for mobile version’ is closed to new replies.