shreddie Feb 15, 2017 · 11:36 pm #5950 A while ago, Andrew helped me with Custom CSS for adding a Header background image. I tried replacing it with a new one, but it doesn’t scale properly. It is currently 1080×216. When the window shrinks, rather than scaling, the image is truncated.
I need to know what size to create the image, so that it properly fits/scales on the various screen sizes that I need to support (desktop browser, tablets, phones…)
And is there anything else I need to do to get it to behave responsively?
Thanks,
Bruce
Puro Support Puro Feb 16, 2017 · 12:41 am #5952 Hi Bruce, thanks for reaching out. Could we see the problem in action? Do you have a link? You can use the Set as private reply checkbox below to keep things private.
shreddie Feb 16, 2017 · 12:46 am #5953 This reply has been marked as private.
Puro Support Puro Feb 16, 2017 · 1:07 am #5954 Thanks, please, could you try adding this image as your logo and removing the related Custom CSS, I’ll try adjust from there.
Puro Support Puro Feb 16, 2017 · 1:13 am #5955 Once the background is added to the logo setting, add the following Custom CSS:
.site-header {
line-height: 0;
padding: 0;
}
.site-header .site-branding {
padding-right: 0;
}
.site-header .site-branding img {
margin-top: 0;
}
#site-navigation {
display: none;
}
@media (max-width: 768px) {
.site-branding {
float: none;
}
}
shreddie Feb 16, 2017 · 2:33 am #5956 OK, changed. It seems pretty good! Thanks!!
Bruce
Puro Support Puro Feb 16, 2017 · 2:58 am #5957 Glad that helped. All the best 🙂