First of all im aware its a pretty old setup - but i just got on it - so need to set things up proper before anything else imo.
How do i get the slider block to be center align - like the new products below - been surfing like a mad man - trying alot - nothing seems to work - thanks for taking time to read this
Please be very specific on what to do since im a noob - thanks
Code from Slider:
<div class="slider-wrapper-bg">
<div class="slider-wrapper">
<div class="slider">
<ul class="items">
<li><img src="{{skin url='images/media/slider2.jpg'}}" alt="" />
<div class="banner">
<div class="banners-padding">
<div class="banners-left"><a href="{{store url='biltilbehor/viskerblade.html'}}"><span class="banners-title">Bosch <span>viskerblade</span></span></a>
<p class="banners-slog">Stort udvalg af Aerotwin visker!</p>
</div>
</div>
</div>
</li>
<li><img src="{{skin url='images/media/slider1.jpg'}}" alt="" />
<div class="banner">
<div class="banners-padding">
<div class="banners-left"><a href="{{store url='biltilbehor/p-skiver.html'}}"><span class="banners-title">Elektroniske <span>P-skiver</span></span></a>
<p class="banners-slog">Se vores store udvalg til skarpe priser!</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Solved! Go to Solution.
Hi rune_balken,
To do that you will need to edit your CSS
Located at https://www.autobixen.dk/skin/frontend/default/theme417/css/styles.css
Line 2558
Replace this:
.slider-wrapper {
position: relative;
width: 763px;
height: 458px;
overflow: hidden;
float: center;
}
With this:
.slider-wrapper {
position: relative;
width: 763px;
height: 458px;
overflow: hidden;
margin-right: auto;
margin-left: auto;
}Let me know if this works fro you.
Hello @rune_balken ,
I can't see sidebar on live website, Please add it and let me know
--
If my answer is useful, please Accept as Solution & give Kudos
Hi rune_balken,
To do that you will need to edit your CSS
Located at https://www.autobixen.dk/skin/frontend/default/theme417/css/styles.css
Line 2558
Replace this:
.slider-wrapper {
position: relative;
width: 763px;
height: 458px;
overflow: hidden;
float: center;
}
With this:
.slider-wrapper {
position: relative;
width: 763px;
height: 458px;
overflow: hidden;
margin-right: auto;
margin-left: auto;
}Let me know if this works fro you.
at first i dident get it - now i do - IT WORKS!!!
2 last things i need to center:
The small logos under the slider
Text "nye produkter"
then im a VERY happy man - thanks for a fast and perfect answer - bowing to the master!
Hi rune_balken,
To center "Nye produkter"
Have a look inside your CSS file located
https://www.autobixen.dk/skin/frontend/default/theme417/css/styles.css
Line 2527
Change this:
.cms-home .subtitle {
}to this
.cms-home .subtitle {
text-align: center;
}To center Logos:
Again have a look at CSS
https://www.autobixen.dk/skin/frontend/default/theme417/css/styles.css
line: 2588
Change this:
.banner-block {
overflow: hidden;
background: #fff;
padding: 8px 20px 0;
}To this
.banner-block {
overflow: hidden;
background: #fff;
padding: 8px 20px 0;
align-items: center;
display: flex;
flex-wrap: wrap;
}And to finish that you will need to add this
.banner-block > * {
flex-grow: 1;
}Have fun