[Heidi]

Hi, Can you help with this, I need slideshow to be max 1190px (or same width with site contents) and center aligned on front page?
I tried, and you can see that in here http://www.valepa.fi/sivut-2016/
But it is not working right with Safari on Mac, there slideshow is much larger than it should. What is right css for that or what is the best way to do it as I can’t use 100% width slideshow on this site (customer need).
Than you for these great templates:)

[Theme Horse Support Team]

Hi Heidi,

Sorry! We have visited your site in safari on Mac and it display same like in other browser nothing is different.
And what you want to do for the slider? You want 1190px max-width OR want it to make 100% width.

Thank you!

[Heidi]

Hi, when I look at the site on safari, the slideshow is much larger than other site parts together. I need it to be max width 1190px and centered. What code would you use to do it?

[Theme Horse Support Team]

Hi Heidi,

For that you have to add below CSS code in custom CSS:

.featured-slider {
    margin: -1px auto 0;
    max-width: 1190px;
}

Thank you!

[Heidi]

Ok, the problem seems to be that site width is in % and Mac screen is smaller than my PC so that’s why it shows slider larger than site content. How to make slider same width than site contents (logo + menu area etc) ?

[Theme Horse Support Team]

Hi Heidi,

You can use narrow layout as well for the same width for slider and the contents.
Go to Appearance -> Customize -> Ambition Theme Options -> Site Layout click on narrow layout option then click on Save button.

Thank you!

[Heidi]

Hi, that would be good solution, but then logo+topmenu area and footer is not 100% width and I need those to be 100% but not the slideshow!

[Theme Horse Support Team]

Hi Heidi,

Ok set it back to the wide layout and just use below custom css to make slider same width than site contents

.featured-slider {
    margin: 0 auto;
    max-width: 1170px;
}

Thank you!

[Heidi]

Hi, it won’t work on smaller screens. On my mac, slideshow is larger than logo + topmenu area but on pc it is same width.

[Theme Horse Support Team]

Hi Heidi,

Please try below custom css code. Hope it solves your issue.

.featured-slider {
    margin: 0 auto;
    max-width: 1170px;
}
@media only screen and (max-width: 1290px) {
	.featured-slider {
		width: 964px;
	}
}
@media only screen and (max-width: 1023px) {
	.featured-slider {
		width: 708px;
	}
}
@media only screen and (max-width: 767px) {
	.featured-slider {
		width: 300px;
	}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.featured-slider {
		width: 460px;
	}
}

Thank you!

[Author]

Posts