Hi @strakerc
yes you can target only mobile by using media queries, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries, in the Website Custom CSS field.
The following code hides the banner if the device screen width is greater than 801 pixels, which is around the limit for tablets.
@media (min-width:801px) {
#simple-banner {
display: none;
}
}
If you have header padding or margin you’ll want to do something like:
@media (min-width:801px) {
#simple-banner {
display: none;
}
}
@media (max-width: 800px) {
header {
padding-top; 40px;
margin-top: 10px;
}
}
That will make sure the header padding/margin will only show on devices with a width up to 800 pixels. You would need to remove the padding and margin from the simple banner Header Padding and Header Margin fields as well. Also make sure to play around with that pixel breakpoint to find which value is best for your use case.
As a side note, adding mobile specific settings has been in the feature backlog for a while now, so I will look to enhance this in a future update.
