How do I make the showcase banner taller without getting space below the curve?

  • Resolved Dorothy Batts

    (@dorothy-batts)


    10 years, 11 months ago

    Hi guys, Thanks for your theme. My client, for whom I’m designing the site, especially loves the curved header on the front page!

    But how do I make the header image taller than 340px without breaking the theme? I tried, and right now there’s about a 20px space between the bottom of the header curve and the main content box so that the background image shows. How do I make the slider/image area taller and get rid of the space below the curve? I am using the Celestial Lite child theme.

    Thanks,
    Dorothy

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you link your site?

    Thread Starter Dorothy Batts

    (@dorothy-batts)

    https://www.dotbattsdesigns.com/jettandcompany

    Your flex slider has a margin bottom in it’s own css file that looks like this at line 66:

    .responsive-slider.flexslider {
background: rgba(0, 0, 0, 0) !important;
border: none !important;
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
-o-border-radius: 0 !important;
border-radius: 0 !important;
margin-bottom: 30px;
}

    The margin-bottom: is what is doing it. You will need to change that or override it with editing the css and make it 0

    Thread Starter Dorothy Batts

    (@dorothy-batts)

    Wow! Thank you so much! That works perfectly!

    Thread Starter Dorothy Batts

    (@dorothy-batts)

    Now how do I make the image/slider area taller to accommodate a slightly taller image/slider? Thanks.

    The container this goes into has a max-height of 590px, but this is controlled from line 80 of the style.css file 

    #st-banner0-wrapper {
	max-height: 590px;
	position: relative;
	border-top: 10px solid #da2525;
	z-index: 1;
}

    Basically your image or slider has a height option, but if you need it taller than the mx-height, you can increase the max-height above, otherwise just use the height setting for your slider (if it has one).

    Thread Starter Dorothy Batts

    (@dorothy-batts)

    You really know your stuff! When I grow up, I want to be just like you ?? I plugged in 460px instead of 340 for the slider height, adjusted the slides and voila! Thank you so very much! You’re the greatest.

    Glad to be of help ??

    By the way, the site looks great!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How do I make the showcase banner taller without getting space below the curve?’ is closed to new replies.