Hi,
Just wondering, when the website is at full page the font size is quite small on the main page banner, when I make the page smaller the H2 font size increases which is fine, however I want the banner H2 font size when on a full page to be larger.
Im not sure if that makes sense at all however I have added images to try help explain.
The first image is the full screen but H2/Homewares heading is small
The second image I have reduced the screen and H2/Nancybird Sale is larger which is fine. But I would like the ‘full screen Homewares’ heading larger.
Help to fix would be greatly appreciated thanks!
Hi,
To target elements on different screens, you can make use of the below CSS code to target all screens that are having a bigger width than 768px (in simplest terms, desktop/laptop devices.
@media (min-width:768px) {
h2 {
font-size:30px !important;
}
}
On the other hand, if you want to apply the CSS changes only on mobile phones, the following code might come in handy:
@media (max-width:768px) {
h2 {
font-size:24px !important;
}
}
For a better relevancy, please share your website link.
Cheers!
@GabrielS thanks.
Website is: https://thefairtraderstore.com.au/
I have added the code you have suggested to the theme.css file however doesn’t seemed to have made a difference.
On the theme.css file, there is the below code also which I thought had something to do with it, however, I have deleted it (now put it back again) and it still doesn’t make a difference…
}
.rte,
.rte p,
.rte:not(.rte–column),
.rte:not(.rte–column) p{
font-size: calc(13.144256px * var(—font-adjust-body));
}
@media (min-width: 480px) {
.rte,
.rte p,
.rte:not(.rte–column),
.rte:not(.rte–column) p{
font-size: calc( ( 13.144256px + 1.382528 * (100vw - 480px) / 920 ) * var(—font-adjust-body) );
}
}
@media (min-width: 1400px) {
.rte,
.rte p,
.rte:not(.rte–column),
.rte:not(.rte–column) p {
font-size: calc(14.526784px * var(—font-adjust-body));
}
}
Hi - most of the websites have a different structure, that code was just a reference.
Based on your website structure, the CSS code below should allow you to edit that specific part, depending on the screen.
@media (min-width:768px) {
.wrapper.preventOverflowContent h1 {
font-size: 26px !important;
}
}
As a reference, the below code should affect the both title/subtitle parts of your theme:
.wrapper.preventOverflowContent h1, p.content--overlay.h5--body {
font-size: 24px !important;
color: red !important;
font-family: sans-serif !important;
}
I hope that the above is relevant
Cheers!
That’s great thanks! I just added the first code.
Thanks again!
Glad that I could be of help!
