[Resolved] How to set a content to display differently on desktop vs mobile

Home Forums Support [Resolved] How to set a content to display differently on desktop vs mobile

Home Forums Support How to set a content to display differently on desktop vs mobile

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #335749
    Kenny

    Thanks for the help agian. The home page message we have on https://fimicimplement.com/ , we want to it display 16 font on desktop but it will be too large to view for mobile. Ideally 8px is perfect for mobile viewing but it will be too small for desktop. How do i separate them in codes to display both version depending on the device? Below is the code i have for the message.

    #Home-1 {font-size: 10px;
    font-family: Georgia, ‘Times New Roman’, serif;
    color: #000;
    text-align: center;
    font-weight: 100;
    font-family: ‘Hoefler Text’, Georgia, ‘Times New Roman’, serif;
    font-weight: normal;
    font-size: 1.0em;
    letter-spacing: .1em;
    line-height: 1.0em;
    margin:0px;
    text-align: center;
    text-transform: uppercase;}

    #335762
    Leo
    Staff
    Customer Support

    Try this for mobile:

    @media (max-width: 768px) {
        #Home-1 {
            font-size: 10px;
            font-family: Georgia, ‘Times New Roman’, serif;
            color: #000;
            text-align: center;
            font-weight: 100;
            font-family: ‘Hoefler Text’, Georgia, ‘Times New Roman’, serif;
            font-weight: normal;
            font-size: 1.0em;
            letter-spacing: .1em;
            line-height: 1.0em;
            margin:0px;
            text-align: center;
            text-transform: uppercase;
        }
    }

    This shows you all the break points if you are interested: https://generatepress.com/forums/topic/how-do-i-search-for-my-previous-posts/#post-263744

    #336286
    Kenny

    I tried that but no matter what i entered as font size, it will always display the designated font size under page builder.

    I tried to add !important; but that didnt help.

    #336309
    Tom
    Lead Developer
    Lead Developer

    You’ve added inline CSS to your elements: https://www.screencast.com/t/KGdgDDgXkld

    You’ll want to remove those font-sizes etc.. if you want to manipulate them on mobile with CSS.

    #336314
    Kenny

    i got it to work.. thank you so much 🙂

    but i have another dumb question, once the font are shrink-ed, there is an opening white space at the bottom of the page, the space varies depending on device.
    https://fimicimplement.com/wp-content/uploads/2017/06/Screenshot_20170621-005837.png
    https://fimicimplement.com/wp-content/uploads/2017/06/1497977891674.jpg

    These spaces were originally the footer which i hid on mobile view. Is there anyway to eliminate it completely on mobile?

    #336864
    Kenny

    help please?

    #336914
    Leo
    Staff
    Customer Support

    This is happening because that page doesn’t have enough content.

    You can try this: https://generatepress.com/forums/topic/disable-background-passed-the-footer/#post-277019

    #337260
    Kenny

    I tried this but it didnt help 🙁

    html:after {
    content: “”;
    width: 100%;
    height: 100%;
    background: #FFF;
    position: fixed;
    }

    #337452
    Tom
    Lead Developer
    Lead Developer

    Typically you should just make it so your pages are long enough. It’s a standard thing with websites – they’re only as tall as your content.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.