CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Enes S
Enes S

Reputation: 23

Rectangular inside circle responsive with contents

I'm trying to make rectangular inside the circle on the left , when im resizing the screen of the website the shapes moving out and the texts checking out from the shapes , any ways to make texts and shapes responsive to all screens
The code : https://codepen.io/enespro/pen/rNWmLvP

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="circle">
          <h3 class="mt-4">Bzns Monster School<br><span style="font-size: 20px; color: #DDDD;">From Zero To Hero</span></h3>
        </div>
        <div class='rect-box'>
      </div>
      <div class='rect-content'>
        <div class="content">
          <span>Lorem ipsum dolor sit amet, consetetur<br> sadipscing elitr, sed diam nonumy eirmod<br> tempor invidunt ut labore et dolore magna.</span>
        </div>
      </div>
      <button class="btn btn-outline-secondary ml-1">Read More</button>
      </div>

enter image description here

enter image description here

Upvotes: 0

Views: 324

Answers (1)

Riccardo Bertolini
Riccardo Bertolini

Reputation: 166

I see in your code there's a lot of position absolute that will just drive you crazy in long term to maintain that code. What about using the magic of flex, instead? :) I rewrote your code here below. Check it clicking on "Run Code Snippet" to see it in action.

I suggest on the mobile to separate the banner from the circle to make it responsive and readable. Enjoy!

.wrapper {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 300px;
  flex-direction: column;
}

.circle {
  border-radius: 50%;
  background-color: #000;
  min-width: 200px;
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.circle span {
  color: #fff;
}

.rectangle {
  width: 100%;
  padding: 10px;
  text-align: center;
  background-color: #eee;
}


@media screen and (min-width: 600px) {
  .circle {
    position: absolute;
  }
  
  .rectangle {  
    padding: 30px 0 30px 220px;
  }

  .wrapper {
    flex-direction: row;
  }
}
<div class='wrapper'>
  <div class='circle'><span>Lorem Ipsum</span></div>
  <div class='rectangle'>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
</div>

Upvotes: 1

Related Questions