Hello Themeco dudes and dudettes,
I have a image background for a header that must change width for 3 breakpoints, so i have a grid with 3 cells in it, each cell has its background image width size and it’s H1 title:
All seems cool and It gives control on the headline font size of the 360px one that has to be a little smaller than the other ones. But yoast seo tell me that there shouldn’t be severals H1 title, so i’m not sure it’s the best way to do this.
So I tried with breaking point in the element css :
$el {
font-family:'viner';
}
@media (min-width: 1200px) {
$el{
background-image: url("fond-header.jpg");
background-repeat:no-repeat;
background-position:center;}
}
@media (min-width: 768px) and (max-width: 1199px) {
$el{
background-image: url("fond-header-2.jpg");
background-repeat:no-repeat;
background-position:center;}
}
@media (min-width: 1px) and (max-width: 767px) {
$el{
background-image: url("fond-header-3.jpg");
background-repeat:no-repeat;
background-position:center;
font-size:28px;}
}
(I’m a little noob with css, if this css code can be improved, tell me how)
but the font-size has no effect for the 360px one (why? i tried with a !important but it’s not working too), so, what is the best way to achieve this changing width image with breakpoints with font size control for one width?
