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