Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 21, 2016 at 8:03 am #569212
    tjcoffey4

    I’ve used “color sections” to create hero images on a couple of pages. But thinking there might be a better way.

    Here’s an example of a color section looking how I like http://imgur.com/BzVxmdi

    But on mobile the images are chopped off and don’t make sense because you just see the top left portion of image

    Here’s how it looks http://imgur.com/8H3A3ym
    (note: I currently have whitespace seperator of 400px inserted into color section to make it look ok on dektop but that’s obviously too much for mobile but I don’t see how to make height respond)

    And here’s a mock up of how I’d like it to look on mobile http://imgur.com/IRGhkXp

    How can I use color sections to make hero images look great on all screens?

    January 21, 2016 at 10:55 am #569294
    Vinay

    Hi tjcoffey4!

    Please send us a link to your site and admin access to add some custom css so we can try to help you achieve this.

    Regards,
    Vinay

    January 26, 2016 at 12:02 am #571696
    tjcoffey4

    Vinay, thanks for the offer to help. I’ve included the requested details in the private content section. Thanks again!

    January 27, 2016 at 8:11 am #572651
    Vinay

    Hi!

    We have set the image to top center and added this custom css in Enfold > General Styling > Quick CSS

    Please feel free to play with max-width and max-height if you need to adjust anything

    
/* Slider Height */

@media only screen and (max-width: 1088px) {
   #custom-height-1{
        max-height:320px;
    }
}

@media only screen and (max-width: 480px) {
   #custom-height-1{
        max-height:200px;
    }
}

    Regards,
    Vinay

    January 28, 2016 at 1:40 am #573376
    tjcoffey4

    Looks great! Thank you so much!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Color Sections for Hero Images???’ is closed to new replies.