cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Highlighted

Uptown Style Hero Image at top not responsive.

I've tried multiple CSS codes to get this to work on mobile.  I'm trying to get the hero image to be responsive.  It's extremely wide and isn't changing.  

 

http://www.homevisitdoctor.co/jackieyaegermd/

 

Could someone help me?

 

Thank you in advance

Cheryl

Screenshot 2019-10-29.jpg

 

5 REPLIES 5
Super User III
Super User III

Re: Uptown Style Hero Image at top not responsive.

@cdavey 

 

What I would suggest is an @media css that swaps out the background image on smaller devices - I have found over time that background images aren't great at being responsive and you really need to adjust the actual image within the CSS vs trying to get the image itself to scale



I am a GoDaddy End User - Just Like You
Check out my site! | I currently manage over 300 WordPress Websites
* Please note that I offer free advice on this forum. If you would like personalized help, please contact me. Otherwise, please ask your question in the proper forum so the answer can assist EVERYONE in the community and not just you. Thanks! *

Once your issue is resolved,
please be sure to come back and click accept for the solution

Get Better Support on the Community Boards!
Etiquette When Asking for Help from the Community

Re: Uptown Style Hero Image at top not responsive.

What would be the CSS code for that?

 

Thanks

Super User III
Super User III

Re: Uptown Style Hero Image at top not responsive.

@Media only screen and (max-width: 400px) { .hero {background-image:url(pathtoimage);} }


I am a GoDaddy End User - Just Like You
Check out my site! | I currently manage over 300 WordPress Websites
* Please note that I offer free advice on this forum. If you would like personalized help, please contact me. Otherwise, please ask your question in the proper forum so the answer can assist EVERYONE in the community and not just you. Thanks! *

Once your issue is resolved,
please be sure to come back and click accept for the solution

Get Better Support on the Community Boards!
Etiquette When Asking for Help from the Community

Re: Uptown Style Hero Image at top not responsive.

I really do appreciate your help.  It worked some but not all the way. 

 

Here's my code. 

 

@Media only screen and (max-width: 400px) { .hero {background-image:url(<a href="https://www.homevisitdoctor.co/jackieyaegermd/wp-content/uploads/2019/10/Untitled-design-5.png" target="_blank">https://www.homevisitdoctor.co/jackieyaegermd/wp-content/uploads/2019/10/Untitled-design-5.png</a>); width:50%}    }

 

I tried it without the "width:50%" and still it didn't work.

 

The actual image itself is 400 x 600

 

Thanks again.

Cheryl 

Super User III
Super User III

Re: Uptown Style Hero Image at top not responsive.

@cdavey 

 

As you can see from when I did inspect element it is showing up - I think part of the issue is that space is not designed for the logo area - normally the logo would go above the menu. 

 

I noticed from the source code you are using elementor - Personally I'm not a fan of this composer as I find that you run into issues with it. I prefer visual composer.

Screen Shot 2019-10-29 at 3.40.17 PM.png



I am a GoDaddy End User - Just Like You
Check out my site! | I currently manage over 300 WordPress Websites
* Please note that I offer free advice on this forum. If you would like personalized help, please contact me. Otherwise, please ask your question in the proper forum so the answer can assist EVERYONE in the community and not just you. Thanks! *

Once your issue is resolved,
please be sure to come back and click accept for the solution

Get Better Support on the Community Boards!
Etiquette When Asking for Help from the Community