Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #590090

    Hello. Please look at the following page and the top-most color section. My client loves the way the image appears (Bottom Right) on my 27″ monitor, but the image doesn’t look good/correct as the screens get smaller. I know in general how to use media queries adjust for mobile devices, but I’m looking for advice on the following…

    1. I’m looking at this background image on my Macbook’s 13″ screen and the top of the image is cut off. Shouldn’t the background image shrink as the screens do?
    2. What do people normally do on really small mobile devices (e.g. iPhone portrait mode) if they have a background like this? Take it out altogether? I’m always tempted to replace a background image with a regular image to combat this. I’d like to show the image vs. just removing it…in some situations.

    Anyway, long story short – what steps would take next to make the background image look good everywhere?

    Thank you,
    Ryan

    • This topic was modified 8 years, 8 months ago by WP Turned UP.
    #590943

    I had to launch this site this morning. In order to do so, I just changed the size of the background image to get me by. I really need to be able to have the image at the original size and still look good between different size monitors. Maybe I’m doing something wrong, but I shouldn’t have to adjust the image size manually.

    As it is now, this section looks “acceptable” but not “optimal”.

    #592777

    Hey!

    Sorry for the delay.
    We are working on your ticket please wait while we update the results here soon.

    The image in the private content is applied as a inline style using color section. inline styles have the highest specificity and cannot be altered using custom CSS. The result you get using color section is final.

    If you like to make alterations or modify the image in mobile screens you need to remove the background image from color section and apply it using custom CSS.

    Add an ID to the color section and use the below css to remove background image in portable devices

    #bgimage{ 
    	background: #000 url(https://nrtt.com/wp-content/uploads/2016/02/nrtt-our-services-background-75.jpg);
    	background-size: 80%;
    	background-position:bottom right;        
    }
    /* Home page section images on mobile */
    @media only screen and (max-width: 767px) {
    #bgimage{ 
    	background: #000!important;
    }
    }
    

    To maintain the ratio of the image use background size property.

    This link has some detailed explanation

    https://css-tricks.com/almanac/properties/b/background-size/ ( check out related article links)
    https://css-tricks.com/almanac/properties/b/background-image/

    Hope this helps :)

    Cheers!
    Vinay Kashyap

    • This reply was modified 8 years, 8 months ago by Vinay.
    #593573

    I’m good with the mobile device issue, thanks.

    #1 is still an issue however…

    The image looks great on my 27″ screen, but is cut off on my 13.3″ Mac. How can a person ensure this image will look good across screens 13.3″ and above? To me, the software (theme) must do that for you. No?

    #593626

    Hi!

    If it is the color section background image pease use stretch to fit.

    if it is an image set as an background using custom css

    please use background-size:cover; in your custom CSS below the image URL in CSS.

    Best regards,
    Vinay Kashyap

    #593634

    It is a Color Section background and it is set to Stretch To Fit. The image does not scale down properly.

    I had to shrink the image down manually so that it wouldn’t be cut off. Again, to me, the theme is not doing its job.

    #593820

    My fault – it was not set to Stretch. I’m good to go now. Appreciate the help!

    #593986

    Hey!

    Glad we could help :)

    Please feel free to get in touch with us if you have any questions.

    FYI please feel free to check out some useful info we have put together about enfold here http://kriesi.at/documentation/enfold/

    Cheers!
    Vinay Kashyap

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Color Section Background – Responsiveness’ is closed to new replies.