Image will not keep proportion

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.


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

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

Comments

  • 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
  • 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
  • That's because of your divider item inserted inside.
    It just have too big value.

    But, you can make a workaround to it, by setting the section background image size to "Cover"
    Thanks
  • edited March 2020
    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
  • Did you try to change the "background-size" to "cover"?

    Thanks
  • 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

  • I can see the background on mobile: https://prnt.sc/rq5rsc
    A rugged image, is it that image?


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



    .highlight-left:after {
    }
  • 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
  • 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
Sign In or Register to comment.