How to show my circle images in vertically to horizontally?

atulsaini1989 · November 19, 2024, 7:47am

<div class="circle">
	<div class="logo"></div>
	<div class="text">
		
		<p> SUNGLASSES SUNGLASSES SUNGLASSES </p>
</div>
</div>

<div class="circle1">
	<div class="logo1"></div>
	<div class="text1">
		
		<p> THUNDER THUNDER THUNDER THUNDER </p>
</div>
</div>

<div class="circle2">
	<div class="logo2"></div>
	<div class="text2">
		
		<p> BELL BOTTOM BELL BOTTOM BELL BOTTOM </p>
</div>
</div>
<div class="circle3">
	<div class="logo3"></div>
	<div class="text3">
		
		<p> RUSH RUSH RUSH RUSH RUSH RUSH RUSH </p>
</div>
</div>
</div>
</div>
<div class="circle4">
	<div class="logo4"></div>
	<div class="text4">
		
		<p> ASTRA ASTRA ASTRA ASTRA ASTRA ASTRA </p>
</div>
</div>

<script>
	const text = document.querySelector('.text p');
	text.innerHTML = text.innerText.split("").map(
		(char, i) =>
		`<span style="transform:rotate(${i * 10.8}deg)">${char}</span>`
		).join("")
</script>
<script>
	const text1 = document.querySelector('.text1 p');
	text1.innerHTML = text1.innerText.split("").map(
		(char, i) =>
		`<span style="transform:rotate(${i * 11.2}deg)">${char}</span>`
		).join("")
</script>
<script>
	const text2 = document.querySelector('.text2 p');
	text2.innerHTML = text2.innerText.split("").map(
		(char, i) =>
		`<span style="transform:rotate(${i * 10.1}deg)">${char}</span>`
		).join("")
</script>
<script>
	const text3 = document.querySelector('.text3 p');
	text3.innerHTML = text3.innerText.split("").map(
		(char, i) =>
		`<span style="transform:rotate(${i * 10.1}deg)">${char}</span>`
		).join("")
</script>
<script>
	const text4 = document.querySelector('.text4 p');
	text4.innerHTML = text4.innerText.split("").map(
		(char, i) =>
		`<span style="transform:rotate(${i * 10.1}deg)">${char}</span>`
		).join("")
</script>

<style>

{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: consolas;
}
body1
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;

}
.circle
{
	position: relative;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	
	display: flex;
	justify-content: center;
	align-items: center;
}
.logo
{
	position: absolute;
	width: 150px;
	height: 150px;
	background: url("https://eyejack.in/cdn/shop/files/1391CL579-2.jpg?v=1724752316&width=1800");
	background-size: cover;
	border-radius: 50%;
	filter: brightness(1.5) contrast(1.5);

}
.text
{
	position: absolute;
	width: 100%;
	height: 234px;
	animation: rotateText 20s linear infinite;
    color: #dcf228;
    font-weight:900;
}
@keyframes rotateText
{
	0%
	{
		transform: rotate(360deg);
	}
	100%
	{
		transform: rotate(0deg);
	}
}
.text span
{
position: absolute;
left: 50%;
font-size: 1.2em;
transform-origin: 0 100px;
}

.circle1
{
	position: relative;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	
	display: flex;
	justify-content: center;
	align-items: center;
}
.logo1
{
	position: absolute;
	width: 150px;
	height: 150px;
	background: url("https://eyejack.in/cdn/shop/files/1391CL579-2.jpg?v=1724752316&width=1800");
	background-size: cover;
	border-radius: 50%;
	filter: brightness(1.5) contrast(1.5);

}
.text1
{
	position: absolute;
	width: 100%;
	height: 234px;
	animation: rotateText 20s linear infinite;
    color: #dcf228;
    font-weight:900;
}
@keyframes rotateText
{
	0%
	{
		transform: rotate(360deg);
	}
	100%
	{
		transform: rotate(0deg);
	}
}
.text1 span
{
position: absolute;
left: 50%;
font-size: 1.2em;
transform-origin: 0 100px;
}

.circle2
{
	position: relative;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	
	display: flex;
	justify-content: center;
	align-items: center;
}
.logo2
{
	position: absolute;
	width: 150px;
	height: 150px;
	background: url("https://eyejack.in/cdn/shop/files/1391CL579-2.jpg?v=1724752316&width=1800");
	background-size: cover;
	border-radius: 50%;
	filter: brightness(1.5) contrast(1.5);

}
.text2
{
	position: absolute;
	width: 100%;
	height: 234px;
	animation: rotateText 20s linear infinite;
    color: #dcf228;
    font-weight:900;
}
@keyframes rotateText
{
	0%
	{
		transform: rotate(360deg);
	}
	100%
	{
		transform: rotate(0deg);
	}
}
.text2 span
{
position: absolute;
left: 50%;
font-size: 1.2em;
transform-origin: 0 100px;
}

.circle3
{
	position: relative;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	
	display: flex;
	justify-content: center;
	align-items: center;
}
.logo3
{
	position: absolute;
	width: 150px;
	height: 150px;
	background: url("https://eyejack.in/cdn/shop/files/1391CL579-2.jpg?v=1724752316&width=1800");
	background-size: cover;
	border-radius: 50%;
	filter: brightness(1.5) contrast(1.5);

}
.text3
{
	position: absolute;
	width: 100%;
	height: 234px;
	animation: rotateText 20s linear infinite;
    color: #dcf228;
    font-weight:900;
}
@keyframes rotateText
{
	0%
	{
		transform: rotate(360deg);
	}
	100%
	{
		transform: rotate(0deg);
	}
}
.text3 span
{
position: absolute;
left: 50%;
font-size: 1.2em;
transform-origin: 0 100px;
}

.circle4
{
	position: relative;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	
	display: flex;
	justify-content: center;
	align-items: center;
}
.logo4
{
	position: absolute;
	width: 150px;
	height: 150px;
	background: url("https://eyejack.in/cdn/shop/files/1391CL579-2.jpg?v=1724752316&width=1800");
	background-size: cover;
	border-radius: 50%;
	filter: brightness(1.5) contrast(1.5);

}
.text4
{
	position: absolute;
	width: 100%;
	height: 234px;
	animation: rotateText 20s linear infinite;
    color: #5e1f88;
    font-weight:800;
}
@keyframes rotateText
{
	0%
	{
		transform: rotate(360deg);
	}
	100%
	{
		transform: rotate(0deg);
	}
}
.text4 span
{
position: absolute;
left: 50%;
font-size: 1.2em;
transform-origin: 0 100px;
}

</style>

PageFly-Amelia · November 20, 2024, 7:14am

Hi @atulsaini1989 ,

This is Amelia from PageFly - a Landing Page Builder App

You can try to use these CSS to display your circle images horizontally instead of vertically,

/* General styles */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: consolas;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-wrap: wrap; /* Allows wrapping to the next line if needed */
}

/* Circle container styles */
.circle, .circle1, .circle2, .circle3, .circle4 {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px; /* Adds space between circles */
}

/* Logo styles */
.logo, .logo1, .logo2, .logo3, .logo4 {
  position: absolute;
  width: 150px;
  height: 150px;
  background: url("https://eyejack.in/cdn/shop/files/1391CL579-2.jpg?v=1724752316&width=1800");
  background-size: cover;
  border-radius: 50%;
  filter: brightness(1.5) contrast(1.5);
}

/* Text styles */
.text, .text1, .text2, .text3, .text4 {
  position: absolute;
  width: 100%;
  height: 234px;
  animation: rotateText 20s linear infinite;
  color: #dcf228;
  font-weight: 900;
}

.text4 {
  color: #5e1f88;
  font-weight: 800;
}

@keyframes rotateText {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.text span, .text1 span, .text2 span, .text3 span, .text4 span {
  position: absolute;
  left: 50%;
  font-size: 1.2em;
  transform-origin: 0 100px;
}

I hope that my solution works for you.

Best regards,

Amelia | PageFly

atulsaini1989 · November 20, 2024, 10:28am

Its showing horizontally but not aligned properlly. Check the image for reference

It should be scrollable if it goes out of margin

preview link: https://hqouge3tmscm4p4d-58388316208.shopifypreview.com

Topic		Replies	Views
How to show my images vertically to horizontally ? Technical Q&A javascript , css , html	1	16	November 20, 2024
How to add more menus horizontally in my code? Education & Credentials troubleshooting , Setting-Up	3	49	January 29, 2025
Change collections list to display in a horizontal circular grid instead of vertical squares Store Design design	4	72	August 18, 2023
How to make my code mobile responsive and scrollable? Technical Q&A javascript , css , html	5	41	November 25, 2024
Clickable images with multiple text - Dawn Shopify Discussion troubleshooting , shop-performance	1	23	June 5, 2023

How to show my circle images in vertically to horizontally?

Related topics