Is there a way of having different sized font on the desktop version than mobile version? The heading in my front page hero looks good large on the desktop version however, the mobile version then overrides and is too big.
URL: https://lsaccountingfirm-umbrella.myshopify.com/
TIA
Hello @LSAccounting
Go to the online store ->theme >Edit code >Assets >base.css >Add code in this file.
@media only screen and (max-width: 768px) {
h1, .h1 {
font-size: calc(var(–font-heading-scale) * 3rem);
}
Hello @LSAccounting ,
Can you please share screenshot of hero banner image.
This is PageFly - Advanced Page Builder. I would love to give you some recommendations
Add this css at the bottom
Online Store ->Theme ->Edit code
Assets → base.css
@media (max-width:767px) {
.header {
padding: 0 !important;
}
}
Hope you find my answer helpful!
Regards,
PageFly
It doesn’t seem to do anything. I have attached pictures of what happens with the Mobile Heading when I change my Title to Large on desktop version. I would like to have my Mobile Heading Small like how shown but keep it large on the desktop. Maybe these will help you adjust the code or the sizing in the code somehow?
It did not help. I have attached pictures of what happens with the Mobile Heading when I change my Title to Large on desktop version. I would like to have my Mobile Heading Small like how shown but keep it large on the desktop. Maybe these will help you adjust the code or the sizing in the code somehow?
See below or above please.
Hello @LSAccounting
Go to the online store ->theme >Edit code >Assets >base.css >Add code in this file.
@media screen and (max-width: 768px)
.banner__heading.h0 {
line-height: initial;
}
.banner__box>*:first-child {
margin-top: 0;
}
Unfortunately, still no luck.
Maybe these codes do not work as in order for me to have the video banner I had to use another code as Dawn do not originally offers video banners - Is there a possibility that the codes for the heading conjoined with the code for the video banner cannot be used together?