Make Full Width Header Responsive

[latimeria]

I have Daily Dish Pro and my designer made the header full width. It's not resizing on mobile, though. Is there custom CSS I can add to make it happen since I am not sure how soon it can be fixed? Thanks.

http://2dorksinlove.com

[Victor Font]

You have to change the CSS for .site-header at line 1354 in style.css.

Change this:

.site-header {
    background: url(https://2dorksinlove.com/wp-content/uploads/2018/05/2-Dorks-in-Love-1.png);
    height: 305px;
    width: 100%;
}

To this:

.site-header {
    background: url(https://2dorksinlove.com/wp-content/uploads/2018/05/2-Dorks-in-Love-1.png);
        background-size: auto auto;
    height: auto;
    max-height: 305px;
    width: 100%;
    background-size: cover;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[latimeria]

I did try that, but it didn't seem to do it.
Someone gave me this code and it works, except there is a whole lot of padding around the header. How would I reduce? Thx.

.site-header {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

@media only screen and (min-width: 1300px) {
.site-header {
min-height: 350px;
}
}

@media screen and (max-width: 960px) and (min-width: 1299px) {

.site-header {
min-height: 250px;
}
}

@media screen and (max-width: 770px) and (min-width: 959px) {

.site-header {
min-height: 200px;
}
}

@media screen and (max-width: 600px) and (min-width: 769px) {

.site-header {
min-height: 150px;
}
}

@media screen and (max-width: 280px) and (min-width: 599px) {

.site-header {
min-height: 100px;
}
}

[Jessdesigns4u]

We put your code in and nothing changed. Please advise. https://vitalizedbody.com/

[Author]

Posts