limit width of slider images?

[Christian]

Hi,

Is it possible to limit the width of slider images? currently they take up the whole width of the page (regardless of size of browser window). I would also lke to make the slider image hight smaller too – it seems to take up too much room. If I can make it flush with the outer edge of the 4 buttons (or 3 as I am using).

I would also like to remove the slider caption area -is this possible?

Is it also possible to make the images in the buttons to fill the four buttons?

Can I make the logo (although centralised) to sit flush against the top bar (and have the image not take up so much room?

Can I justify the menus so they are evenly spaced in the width of the page margins

Thanks

[Sonnal S Sinha]

Yeah most of these things are possible with 1-2 CSS tweaks. Kindly show us your website URL for us to help.

Regards,
Shri

[Christian]

That’s excellent -thank you.

Our website is:

http://www.thewholefoodmarket.com.au/

Thanks

[Sonnal S Sinha]

Hi Christian,

Kindly go to Appearance>>Theme Option>>Basic Setting>>Custom CSS Box

Add this code there:

#slider{ width:1000px; margin:0 auto !important;}
.nivo-caption{display:none !important;}
.page_column_thumb img{width:auto;}

For the logo kindly crop the logo. There is too much white space in the logo image.

Regards,
Brad

[Christian]

thanks – that now looks good on a desktop, but on a mobile device the slider image is the full screen width, but the rest of the side takes approx only 1/4 of the scfreen and is set to the left hand side. is there any way to fix this?

[Sonnal S Sinha]

Hi,

Kindly add this code in custom CSS Box:

@media screen and (max-width:980px) {
#slider{ width:80% !important;}
}

Regards,
Brad

[Christian]

thanks Brad – although this doesnt seem to have made any difference on a mobile device.

[Sonnal S Sinha]

Hi Chris,

On your website Slider background color is white and its merged with the slide images. Currently slider is in boxed layout. If you change the background color of slider you can see the above code is working fine on mobile devices.

Add this code in custom CSS box.

@media screen and (max-width:980px) {
.slider-main{background:#eee;}
}

Regards,
Brad

[Author]

Posts