- This topic has 8 replies, 3 voices, and was last updated 6 years, 9 months ago by Tom.
-
AuthorPosts
-
June 19, 2017 at 9:08 am #335749Kenny
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;}June 19, 2017 at 9:37 am #335762LeoStaffCustomer SupportTry 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
June 20, 2017 at 8:51 am #336286KennyI 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.
June 20, 2017 at 9:16 am #336309TomLead DeveloperLead DeveloperYou’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.
June 20, 2017 at 9:19 am #336314Kennyi 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.jpgThese spaces were originally the footer which i hid on mobile view. Is there anyway to eliminate it completely on mobile?
June 21, 2017 at 7:54 am #336864Kennyhelp please?
June 21, 2017 at 8:45 am #336914LeoStaffCustomer SupportThis 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
June 22, 2017 at 12:43 am #337260KennyI tried this but it didnt help 🙁
html:after {
content: “”;
width: 100%;
height: 100%;
background: #FFF;
position: fixed;
}June 22, 2017 at 9:34 am #337452TomLead DeveloperLead DeveloperTypically 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.
-
AuthorPosts
- You must be logged in to reply to this topic.