Image will not keep proportion

scott74

Cannot get this to work for anyting. Same exact setting that are on my demo site but on mobile the height of the image gets real short.

Using your demo image for your Dentist 3 site..  Works on one of my sites but not the other.

https://www.loom.com/share/db4b115054d449b0b09ab7c0288fe362

Site not working on that I copied the exact setting from demo over to this section of the page

https://tequilamex.com/

Site working on that I installed from demo
https://814media.com/dentist3/

Pablo

Hello,

It looks like something is overwriting the css classes not correctly.

As can I see, you are using some kind of the minify plugin - please for now disable all of the plugins, clear the cache of your browser and check, if the issue still exists.

Also, if it won't help - please disable the minify plugins, I have to take a look at the original css code.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

scott74

ok I have treied that.

I* am using SG Optimizer from SIte Ground to minify CSS. I have tured all plugins off and turned off those settings in the plugin and logged into cloudflare to assure the minify was off there also which it was.

Cleared cache in Cloud Flare and in my browser but did not help. Still seems to have that big gap under image.

Going to turn the plugins back on except for the SG Optimizer if you want to take a look now

Pablo

That's because of your divider item inserted inside.

https://prnt.sc/rq0zt9

It just have too big value.

But, you can make a workaround to it, by setting the section background image size to "Cover"

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

scott74

Strange , I used the same settings from the demo install which works on the 814Media site but not the Tequilas site

It’s 500px in the demo install plus I even used the same image to make sure from the demo 

But cover does seem to work now... You guys just have it on the demo install to cover only on ultra wide screens thanks

Pablo

Did you try to change the "background-size" to "cover"?

https://prnt.sc/rq3rq4

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

scott74

Sorry yes that did work

Thank you ..

Not sure why if only affected this site but who knows lol

Ps.. I also used a background image for the highlight left by using css... I noticed that would not show on mobile so had to use the same image in the actual upload area on the left side

Any ideas why that wouldn’t work on mobile ?

I have used background css in other areas before that showed up on all devices but that giggliest left one couldn’t get to show on mobile for reason

Pablo

I can see the background on mobile: https://prnt.sc/rq5rsc

A rugged image, is it that image?

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

scott74

It seems that it does not apply once it gets down to mobile width.. See here

https://www.loom.com/share/4bd08b88f373495aa9c892d3010ad2a6

.highlight-left:after {

1. background: #941917;
2. background: #000 url(https://res.cloudinary.com/dqwzka5cv/image/upload/v1585327410/Tequilas/Website/redtexture-back.png);

}

Pablo

But, why you want to use the highlight option? It's not desired for this kind of functionalities.

Just create two wraps in that section and insert it as a background image - you will avoid additional css codes in that way.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

scott74

ok thanks... was thinking it may make the image on the right act better and more responsive.. I will play around with it . Thank you