Responsive Banner Image (iPad, Laptop, Desktop Viewports)

Hi,

I am trying to create a responsive header (logo banner).

I have created multiple dimensions of the image namely – 768 x 266 (for iPad dimensions)- https://www.thechildhoodlife.com/wp-content/uploads/2018/05/Header-Background-with-Logo-768-x-276.jpg

And

1024 x 266 (as a second breakpoint)- https://www.thechildhoodlife.com/wp-content/uploads/2018/05/Header-Background-with-Logo-1024-x-276.jpg

This is the CSS I used on both those image breakpoints. I hope you can understand what I am doing and I will provide my logins if you need to investigate further.

What I am trying to do is make the header as seamless (as possible) by using both those images.

CSS ——————————————————————————————————————–

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.td-banner-wrap-full.td-logo-wrap-full.td-logo-mobile-loaded.td-container-wrap {
background-image: url(“https://www.thechildhoodlife.com/wp-content/uploads/2018/05/1024-cover-logo-the-childhood-life.png”) !important;
min-height: 276px !important;
min-width: 1024px !important;
background-size: cover;
background-position: 50% 80%;

}

}

@media only screen and (min-device-width: 768px) and (max-device-width: 769px) {
.td-banner-wrap-full.td-logo-wrap-full.td-logo-mobile-loaded.td-container-wrap {
background-image: url(“https://www.thechildhoodlife.com/wp-content/uploads/2018/05/Header-Background-with-Logo-768-x-276.jpg”) !important;
min-height: 276px !important;
min-width: 768px !important;

}

}

Thanks

Shane

Hi Simion,

I have tried what u said and I cannot achieve that.

I am using style 10. I uploaded the logo (banner) for for style 10 but it did not come out with proper resolution. Bear in mind the image that I used is 1326 x 276 here https://www.thechildhoodlife.com/wp-content/uploads/2018/05/Childhood-Life-Logo-Background-1349-x-276.jpg

I tried uploading in the style 10 logo module you are referring to and it stretches out and loses major resolution. I tried using “Cover”, “Full Width” ect and I couldn’t get it the way I wanted.

I am afraid to undo some of the CSS I have placed in Theme Panel > Custom > CSS and on the Live CSS toolbar. Is there any way that you could have a look at this for me?

I have spent a day trying to figure this out. I would really appreciate if someone could take a look at this for me.

Thanks

Shane

• This reply was modified 8 years by Daltai.

Hi Simion,

Ok thats really strange! It appears to be working correctly now! But I honestly tried this already and it had my mind completely stressed.

I will remove some of the unnecessary CSS now and see if it works the way I want it to.

I think there is a conflict depending where you save your CSS in the theme.

Live CSS vs Theme Custom CSS modudle. I found that can change things especially with the use of “!important” in a piece of CSS code

Thanks!

Shane

• This reply was modified 8 years by Daltai.

Hi Simion,

I have one last issue. There is an overlap with the header and where I have set the CSS as the background image. You will see exactly what I mean once u resize the browser and watch the header.

I have deleted all possible CSS associated with this (I think) but it must be hiding somewhere. I checked 3 places 1. Live CSS, 2. Theme Panel Custom CSS, 3. Customizer CSS

Anywhere else I should be looking?

This is the website – resize and you will see what I mean – https://www.thechildhoodlife.com/

Thanks

Shane

Simion can I please give you my logins to do this. I have been trying to fix this for 24hrs and cannot seem to get anywhere with it

Shane

Hi Simion,

I eventually fixed this issue. Where would you recommend adding CSS – Live CSS editor or in the Theme Panel?

I find using both can cause unexpected results – possibly interfering with the cascade of CSS.

Thanks

Shane