This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Post Loop Widget – Carousel Slider image sizes

Open 7 replies premiumthemetheme-vantage
nrl009
11 years ago · Last reply by Andrew Misplon 11 years ago

Is there a way to change the sizes of the images that are being displayed in the Carousel Slider? I would like then to be smaller, let’s say something like 100px tall.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Andrew Misplon Staff 11 years, 7 months ago

    Hi Norman

    Unfortunately not a setting but you can try inserting the following under Appearance > Themes Settings and adjusting as required:

    /* Page Builder Post Loop Carousel */
.vantage-carousel-wrapper .vantage-carousel li.carousel-entry .thumbnail a {
width: 242px !important;
height: 162px !important;
background-size: 242px 162px !important;
}
  2. Rich Dunmore 11 years, 7 months ago

    I use the plugin in page-builder and just had to fix an issue where we wanted multiple carousel sizes on the same page. I used some jQuery to do the resizing. Once i found the page builder panel id of the carousel i wanted to modify… your theme might have different classes.

    jQuery("#pgc-20675-3-1").find("ul.sow-carousel-items").css('height','130px');
jQuery("#pgc-20675-3-1").find("li.sow-carousel-item").css('width','125px');
jQuery("#pgc-20675-3-1").find("li.sow-carousel-item").css('height','125px');
jQuery("#pgc-20675-3-1").find("div.sow-carousel-thumbnail").css('width','125px');
jQuery("#pgc-20675-3-1").find("div.sow-carousel-thumbnail").css('height','75px');
jQuery("#pgc-20675-3-1").find("div.sow-carousel-thumbnail > a").css('width','125px');
jQuery("#pgc-20675-3-1").find("div.sow-carousel-thumbnail > a").css('height','75px');
jQuery("#pgc-20675-3-1").find("div.sow-carousel-thumbnail > a").css('background-size','125px 75px');
  3. Andrew Misplon Staff 11 years, 7 months ago

    Hi Rich. Glad to hear you made progress there. Thanks for sharing your solution.

  4. Nature Spy 11 years, 7 months ago

    Hi,

    Related to this – i’d like to change the image sizes to be slightly larger in the Grid loop, and so that they run three abreast rather than the standard 4 I currently have (see test.naturespy.org).

    I’ve been playing with the CSS for about an hour and can’t get it all to sit nicely. Is there a simple bit of code to do this? The above didn’t work for me (after switching it to grid rather than carousel).

    Hope you can help.

    James

  5. Andrew Misplon Staff 11 years, 7 months ago

    Hi James

    Good to hear from you. Please can you open this up in a new thread and I’ll do my best to assist.

    Thanks

  6. Nature Spy 11 years, 7 months ago

    Hi Andrew,

    Yeah sorry I should have raised it elsewhere – but I eventually figured it out anyway. Set loop-grid.php to show 3 in a row and changed width in CSS to 33%.

    Thanks anyway and keep up the great work – this support thread is getting crazy busy these days!

    James

  7. Andrew Misplon Staff 11 years, 7 months ago

    Super, glad you won there! I’m sure you have but just a reminder that loop-grid should be a child theme and the CSS in Custom CSS or a child theme.

    All the best.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread