cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Go to solution
Highlighted
New

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

 

2 ACCEPTED SOLUTIONS

Accepted Solutions
Highlighted
Super User III
Super User III
Solution

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. Thank You Info 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

View solution in original post

Highlighted
Super User II
Super User II
Solution

Re: Uptown Style Hero Image at top not responsive.

@cdavey

 

As an Elementor user, I believe that @PL281 is correct that you've just placed the logo in the wrong area. It's not a limitation of Elementor, however, but the incorrect configuration on the backend of the theme.

 

I can't seem to get the theme you're running, but I would suggest the Hello theme if you're using Elementor, or any barebones theme, as the features of other themes tend to get in the way of the tool that's supposed to make designing your site easier.

 

Anyway, if you use the theme builder tool, you can configure everything to be responsive and make the menus and logo work the way you want, yadda, yadda, yadda...

The tool is only good if you know how to use it.



I am a GoDaddy End User - Just Like You
* Please note that I DO NOT answer private messages. Please ask your question in the proper forum so the answer can assist EVERYONE in the community and not just you. If you contact me via PM for help, I will give you a price quote for my personal services. 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


View solution in original post

6 REPLIES 6
Highlighted
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. Thank You Info 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

Highlighted
New

Re: Uptown Style Hero Image at top not responsive.

What would be the CSS code for that?

 

Thanks

Highlighted
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. Thank You Info 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

Highlighted
New

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 

Highlighted
Super User III
Super User III
Solution

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. Thank You Info 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

View solution in original post

Highlighted
Super User II
Super User II
Solution

Re: Uptown Style Hero Image at top not responsive.

@cdavey

 

As an Elementor user, I believe that @PL281 is correct that you've just placed the logo in the wrong area. It's not a limitation of Elementor, however, but the incorrect configuration on the backend of the theme.

 

I can't seem to get the theme you're running, but I would suggest the Hello theme if you're using Elementor, or any barebones theme, as the features of other themes tend to get in the way of the tool that's supposed to make designing your site easier.

 

Anyway, if you use the theme builder tool, you can configure everything to be responsive and make the menus and logo work the way you want, yadda, yadda, yadda...

The tool is only good if you know how to use it.



I am a GoDaddy End User - Just Like You
* Please note that I DO NOT answer private messages. Please ask your question in the proper forum so the answer can assist EVERYONE in the community and not just you. If you contact me via PM for help, I will give you a price quote for my personal services. 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


View solution in original post