Event planner, carousel spacing

[dd]

Hi,
I’m using the Event Planner theme and am having a few minor issues with the homepage slider and the carousel when the website is viewed on a smartphone in portrait mode.

Website URL: www.srcparty.com/src

First issue:
1. Home page slider – grey bar under the slider
2. spacing on the images
3. Navigation ‘dots’ need to show up under images in the smartphone portrait mode only.

Code Used:
Quality Rentals For Any Event
[client_area][client url=”http://www.srcparty.com/src/product-category/chairs/” image=”http://www.srcparty.com/src/wp-content/uploads/2018/12/Home-page-section-chairs.png”][client url=”http://www.srcparty.com/src/product-category/tables/” image=”http://www.srcparty.com/src/wp-content/uploads/2018/12/Home-page-section-tables.png”][client url=”http://www.srcparty.com/src/product-category/china/” image=”http://www.srcparty.com/src/wp-content/uploads/2018/12/Home-page-section-dishes.png”][client url=”http://www.srcparty.com/src/product-category/glassware/” image=”http://www.srcparty.com/src/wp-content/uploads/2018/12/Home-page-section-glassware.png”][client url=”#” image=”http://www.srcparty.com/src/wp-content/uploads/2018/12/Home-page-section-tents.png”][/client_area]

See Image: https://imgur.com/r5VsEvp

Second issue:
1. spacing on images
2. Would like for ‘carousel’ to show 3 images on smartphone portrait mode only
3. Navigation ‘dots’ need to show up under images in the smartphone portrait mode only.

See image: https://imgur.com/ebCKv6M

Code Used:
[titlearea align=”center” title=”As Seen In” titlelast=”” subtitle=”” titlecolor=”#010203″ titlelastcolor=”#010203″ seperatorcolor=”transparent”][client_area][client url=”https://www.theknot.com/marketplace/src-party-center-grass-valley-ca-405891″ image=”http://www.srcparty.com/src/wp-content/uploads/2019/02/theknot-100.png” width=”100px” height=”100px”][client url=”https://www.weddingwire.com/biz/src-event-rentals-grass-valley/61b6434d5c805f0c.html” image=”http://www.srcparty.com/src/wp-content/uploads/2019/02/Weddingwire-vert-100.png” width=”100px” height=”100px”][client url=”#” image=”http://www.srcparty.com/src/wp-content/uploads/2019/04/Best-of-2018-100.png” width=”100px” height=”100px”][client url=”https://www.nevadacitychamber.com/members/src-party-center/” image=”http://www.srcparty.com/src/wp-content/uploads/2019/02/NCCC-100.png” width=”100px” height=”100px”][client url=”https://www.yelp.com/biz/src-party-rentals-and-supplies-grass-valley” image=”http://www.srcparty.com/src/wp-content/uploads/2019/02/yelp-100.png” width=”100px” height=”100px”][/client_area]

Thanks,
Diane

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (max-width:479px) {
.slider-main #slidera .nivoSlider { min-height: 150px !important;}
ul.clientslider li:nth-child(1) { margin-left: 10px;}
.bx-wrapper .bx-controls-direction a.disabled { display:block; background:#282828 !important;}
.home_section8_content ul.clientslider li { width:95px !important;}
}

Regards,
Brad

[dd]

Hi Brad,
Most of it worked great…thanks. Still have an issue with the slider background:

https://imgur.com/rJi5Ffi

The greyed area needs to tighten up to the slider image so all the webpage moves up. Hope that makes sense.

Thanks,
Diane

[Sonl Sinha]

Hi,

Kindly use this CSS code

@media screen and (max-width:479px) {
#slidera .nivoSlider { min-height: 150px !important;}
}

Regards,
Brad

[dd]

Great! Thanks Brad.

[Sonl Sinha]

Hi Diane,

If you found our service good kindly review us here: https://www.sktthemes.org/forums/topic/reviews-and-testimonials/page/22/

Regards,
Brad

[Author]

Posts