Display elements in a section inline

Highlighted
New Member
2 0 0

Hi

I'm trying to get my product scroll banner to display it's buttons horizontally. I've been wasting time trying to get them out of their relative positions. Any suggestions?

The banner is the 3rd section...

Thanks!!

https://great-sox.myshopify.com/

	<style>
		
		#banner1 {	width:100%;
					height: 155px;
					overflow: visible;
					overflow-x: auto;
					white-space:nowrap; }
		#banner1 .imagehere { display: inline-block; }
		.linky1 { opacity:0.2; 	}
		.linky1:hover { opacity:0.7; 	}
		@media screen and (max-width: 1280px) { #butt01, #butt02 { display:none; } }

    </style>
            <button onclick="scrollWin2()" id="butt01" style="width:35px; height:150px; font-size:20px;">></button><br><br>
            <div id="banner1">
                <a class="linky1" href="/collections/diabetic">
                	<div class="imagehere">
                    	<img src="//cdn.shopify.com/s/files/1/2293/7447/files/pnt5_Wellness_472cdcf8-93cd-4e5c-a209-d1f81b44acec.png" alt="Wellness Diabetic" />
                	</div>
                </a>
                <a class="linky1" href="/collections/yo-sox">
                	<div class="imagehere">
                    	<img src="//cdn.shopify.com/s/files/1/2293/7447/files/pnt5_Yosox_891cc7ef-b941-4386-ac9f-060ef2ab5ed3.png" alt="Yo Sox" />
                	</div>
                </a>
                <a class="linky1" href="/collections/vagden">
                	<div class="imagehere">
                    	<img src="//cdn.shopify.com/s/files/1/2293/7447/files/pnt5_Vagden_f289df65-d85f-42ab-b597-0248a596c0b3.png" alt="Vagden" />
                	</div>
                </a>

           <script>
			function scrollWin() {
			  banner1.scrollBy(-400, 0);
			}
			function scrollWin2() {
			  banner1.scrollBy(400, 0);
			}
			</script>

 

0 Likes
Pathfinder
203 0 30

I don't know if you're worried about anyone using Internet Explorer  6 or anything, but you can use flex-box to do it easily. 

.pages-content {
    display: flex;
}

Then you just have to switch the order your buttons fall in. 

1 Like
New Member
2 0 0

Seems to working in explorer as well as chrome and android. Thanks a lot.

0 Likes