How to set a content to display differently on desktop vs mobile

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

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.

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.

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?

help please?

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

I tried this but it didnt help :(

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

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.