Tip: Custom CSS to modify size of slider images

  • FYI…my customer likes this theme a lot, but wanted to reduce the height of the slider (carousel) images — they felt that 500px was taking up too much screen real estate. Here’s a little custom CSS you can add to reduce the height to, say, 300px:

    .carousel .item {
  line-height: 300px;
  overflow: hidden;
  min-height: 300px;
}

    They also wanted to reduce the size of the gray background that appears behind the slider title/caption/button. Here’s how to do that:

    .carousel-caption {
  padding: 1%;
}

    When you do this, you also might want to change the size of the fonts used in the title/caption. I’ll leave that as an exercise for the reader.

    Nikeo: Please advise if there is anything wrong with what I’ve shown here. Thanks!

Viewing 15 replies - 1 through 15 (of 21 total)
  • Thread Starter linkomatic

    (@linkomatic)

    One additional comment about this: while this solution seems to work okay when viewing the site on a PC-sized screen. It’s not so good on smaller screens — the smaller the screen, the more white space appears between the slider and the elements above and below it.

    Nikeo: can you suggest other custom CSS that would this problem? I’m stretching the limits of my CSS expertise! Thanks again for all the great support.

    tgd

    (@terrydaisydesignsca)

    For responsive themes like this, you should stick to percentage values or rem values instead of pixels. You’re also suggesting a min-height, when perhaps, you should suggest a max-height. Also, if this theme does use Bootstrap, and has all its features, there are some great css classes within Bootstrap that could be of some help.
    Nice looking theme. Can’t wait to try it.

    Thread Starter linkomatic

    (@linkomatic)

    Well, tgd, I’m just substituting new values for the code that appears in the theme itself, which are “hard-coded” as 500px. So, if there’s a better way to do this, perhaps nickeo wants to address that. I’m not aiming to be a theme developer, myself. Cheers!

    This is a great tip thank you.

    It would be wonderful if Cusomizr had full-blown documentation on typical mods like this for the slider – e.g. make it take up half the space, make it taller, less tall, centered, etc. Happy to play with it, but if anyone has a list of key variables, that’d save a ton of time for a ton of us using this great theme.

    Theme Author presscustomizr

    (@nikeo)

    Hi,
    I will improve the documentation on those points.
    Thanks for using Customizr

    Is the slider good for others and bad for me?
    It looks good on the demo, but…
    No matter what I do the image on the slider is cropped top and bottom. Looks like about 15% off the top, 15% off the bottom and I have the middle 70% in full width.

    Please, how can this be fixed?

    wade keller
    marco island, FL

    Hi,
    i put this css to increase the slider height but, although i have an image of 1200×900 it still appears with bands on the top and bottom of the image.

    .carousel .item {
    line-height: 600px;
    overflow: hidden;
    min-height: 600px;
    }

    How i can fix this problem? Is there a maximum or minimum image size?
    Thanks

    Recommended sizes are 1200×500 (Full width) and 1170×500.

    Hi, newby here (both to this site and WordPress). I have opted for Customizr theme but am having trouble with the slider (main) size on the front page – it’s too large. Did have it OK but then I added/removed some pics and now the featured Pages don’t show without scrolling down. Have tried adding the code suggested above. Here is mine added to the Custom CSS code:-

    /* Adjust the Slider Height */
.main .item {
height:        134px;
width:         54px;
min-height:     134px;
line-height:    134px;
}

    Site is https://www.poncesuiteshotel.com

    Hi, apologies for what probably sounds naive but so far I haven’t found an explanation. As I understand it the Customizr theme has 3 image sizes as described in Images section – slider full width, slider boxed and thumbs.

    WordPress also has under Settings, Media three image sizes – thumbnail, medium and large size. I presumed these would be used when images are uploaded but I don’t think this is the case. Where are these settings used please?

    Also if you want to use the same image – but with say 4 different sizes (slider, large, medium and thumb) do you have to load 4 versions of the image in their different sizes? Or with Customizr do you have say two image sizes – slider and thumbs (feature) and then if you want to use another size of image say within a post/page say 500px wide, do I need to upload this as well? I appreciate that one can ‘resize’ the image in the WordPress editor but for speed purposes should I upload the image in all the right dimensions?
    Hoping someone will point me in the right direction.
    Christine

    Upload a reasonably large image and Customizr/Wordpress will create the other versions.

    Thanks ElectricFeet (do they tingle BTW?) I have just managed to find reference to the fact that WordPress does this. Seems such a hard find piece of information and yet quite important. Anyway Thank you for replying.

    Is there a code that makes the slider responsive after the height has been adjusted?
    I feel like i found that in the past, before i was ready to do such a thing, but can’t now

    Delyser

    (@delyser)

    I was able to adjust the height of the slider, using the code below

    /* Adjust the Slider Height */#customizr-slider.carousel .item {height: 300px;min-height: 300px;line-height: 300px;}

    However, I need the transparent screen with the text and button to be centered in the newly sized image. Right now, it’s cut off on the bottom. Failing that, is there a way to resize the transparent screen/text area so that it, too, is shorter?

    PLEASE HELP! Entering crisis mode!

    rdellconsulting

    (@rdellconsulting)

    @delyser, Moderator will chastise you for hijacking a topic. Start a new topic and include a link to your site.

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘Tip: Custom CSS to modify size of slider images’ is closed to new replies.