Creating a circle that adapts to different screen sizes while containing content within

I have a vision for my photography services website where prices are displayed in responsive circles, especially on mobile.

Here's how it appears on a desktop screen:

Desktop view

But unfortunately, on a mobile device, it ends up like this:

Mobile View

This is the code snippet I'm currently using for each circular element: 

.pricessquarered {
  display:flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: solid 16px #d17461;
  padding: 30px;
  width: 10vw;
  height: 10vw;
  color: #d17461;
  font-size: 22px;
  padding-top: 30px;
  border-radius: 100%;
}
<div class="pricessquarered">
  <div>
    <h3><span style="color:#d17461">1 image</span></h3>
  <p>
    45€  
  </p>
    <hr>
  <p><span style="font-size:14px; color:black">
   USD $50
  </span></p>
  </div>
</div>

I'm seeking advice on how to make the circle encapsulate the text as elegantly as it does on the desktop version. Any suggestions?

htmlcssmobileflexboxresponsive

Answer №1

If the screen size is reduced, one solution is to set a fixed width and height.

Another option is to decrease the font size when the screen size shrinks. I have chosen 991px as the breakpoint, but you can customize it according to your needs.

@media all and (max-width:991px){
.pricessquarered {
width:120px!important;
height:120px!important;
margin-bottom:10px!important;
}

.container{
flex-direction:column;
}

}

.container{
display:flex;
}

.pricessquarered {
  transition:all 0.3s;
  display:flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: solid 16px #d17461;
  padding: 30px;
  width: 10vw;
  height: 10vw;
  color: #d17461;
  font-size: 22px;
  padding-top: 30px;
  border-radius: 100%;
}
<div class="container">
<div class="pricessquarered">
  <div>
    <h3><span style="color:#d17461">1 image</span></h3>
  <p>
    45€  
  </p>
    <hr>
  <p><span style="font-size:14px; color:black">
   USD $50
  </span></p>
  </div>
</div>

<div class="pricessquarered" style="transition-delay:100ms;">
  <div>
    <h3><span style="color:#d17461">2 image</span></h3>
  <p>
    45€  
  </p>
    <hr>
  <p><span style="font-size:14px; color:black">
   USD $50
  </span></p>
  </div>
</div>

<div class="pricessquarered" style="transition-delay:200ms;">
  <div>
    <h3><span style="color:#d17461">3 image</span></h3>
  <p>
    45€  
  </p>
    <hr>
  <p><span style="font-size:14px; color:black">
   USD $50
  </span></p>
  </div>
</div>
</div>

Answer №2

To style the inner div within the .pricessquarered class using the flex property with a flex-direction: column and some custom configurations, you can follow the guidelines outlined below. Additionally, ensure to remove any top and bottom margins on the child elements to ensure they fit within the container:

.pricessquarered {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  border: solid 16px #d17461;
  padding: 30px;
  width: 10vw;
  height: 10vw;
  color: #d17461;
  font-size: 22px;
  padding-top: 30px;
  border-radius: 100%;
}

.pricessquarered>div {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-top: 30px;
  padding-bottom: 30px;
}

.pricessquarered>div * {
  margin: 0;
}
<div class="pricessquarered">
  <div>
    <h3><span style="color:#d17461">1 image</span></h3>
    <p>
      45€
    </p>
    <hr>
    <p><span style="font-size:14px; color:black">
   USD $50
  </span></p>
  </div>
</div>

It's important to note that the flex styles applied to your .pricessquarered class specifically target only the direct child div within it. Other elements inside will not be affected by these styles unless additional settings like those above are added. This setup centers the child element vertically and horizontally within its parent container (which could be the body based on your code).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

contrasting ionic and android software development kits

I am interested in developing an android application and have some knowledge about Ionic, which is also used for creating mobile apps. I have more experience with Android development and am curious to understand the distinctions between the two platforms ...

javaandroidangularjshtmlionic-framework

jQuery counter no longer updates when scrolling

I'm having trouble with my jQuery counting function when using the scroll feature on a specific div ID. The numbers freeze if I keep scrolling before they finish updating on the screen. Whenever I scroll to the defined div ID, the counting function k ...

javascripthtmljquerycss

Why is the Border Radius hiding the corners of my image?

I've never experienced this issue before, but no matter how much padding I add to the picture, the edges are still slightly covered up. Here is an example image (notice that it doesn't happen for every icon - the third one has a normal round back ...

htmlcss

Tips for Choosing Two Classes Using CSS

I'm currently exploring ways to select two classes so that when one of them is hovered over, a specific animation will occur. Here is my latest attempt: .news1 { -webkit-filter: blur(3px); filter: blur(3px); -webkit-transition: .3s ease-i ...

htmlcss

Switch from HTML symbol to Java symbol

Is it possible to change an HTML symbol into a Java symbol? For instance, if I have &#xe000, is there a way to obtain the Java char representation like \ue000? What steps should I take to achieve this conversion? ...

javahtmlunicode

Converting JSON into HTML format

Seeking guidance as a developer tasked with rendering JSON to HTML on a webpage. I've taken over for someone else and, despite feeling somewhat in over my head, have managed to build the basic structure using Catalyst/Template Toolkit and Dojo. Now th ...

htmljsondojoxmlhttprequest

Include a condition to check the value of each row (angular material)

I am facing an issue where I need to apply a condition based on the value of the current column, but I am unable to access the value of the current row. I am unsure which variable to use in order to check the condition. I tried using 'row' but it ...

htmlangulartypescriptangular-materialmat-table

How to Position Icon on the Right Side of an Input Field using CSS

Is there a way to position the magnifying glass icon to the right side of my input field? Link to my Fiddle. @import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"); body { margin: 30px; } .search { position: relative; ...

htmlcss

Building a table using MUI 5 and the powerful Grid component from Material UI

For my project, I decided to utilize the Grid component of Material UI v5 to create a global table component. This choice was made due to the difficulties encountered when trying to modify the border and border radius for the table row and footer elements. ...

htmlcssreactjshtml-tablematerial-ui

Incorporate an external JavaScript script using code

I'm currently working on integrating a map widget from 'Awesome Table' into the codebase of an open-source CRM platform. The specific code snippet I need to add is <div data-type="AwesomeTableView" data-viewID="-KLtnY5OHJPgnEOX1bKf"> ...

javascriptjqueryhtmlsrc

The 8 x 8 grid I am constructing is functional, however, the issue lies in the fact that the first line only begins with a single # symbol

I am attempting to create an 8 x 8 grid. It's coming together, but the issue is that the first line only starts with one # sign. function print(msg) { console.log(msg); return msg; } let result = ""; for(let i=1; i<=8; i++) { result += ...

javascripthtmlcss

Adjust the design based on the prop value in Material-UI DatePicker using conditional CSS styling

I recently started working with react and I've encountered a new challenge that has me a bit stumped. My project is using react version 16, which is the version before hooks (I'm unable to update this as it needs to work within another program th ...

cssreactjsmaterial-ui

How can I identify when the payment form in Stripe Elements has finished loading?

When implementing a payment form using Stripe elements, I have noticed that there is sometimes a delay of 5-10 seconds for the form to load completely. Is there a way to detect when the form has finished loading so that I can display a loading animation or ...

javascripthtmlreactjsangularstripe-payments

Using input masking to restrict user input to only numbers and English alphabet characters

My input field is masked as "999999999" and functions correctly with an English keyboard. However, I am able to enter Japanese/Chinese characters into it, which breaks the masking. Is there a way to limit input to English keyboard numerics only? <inpu ...

javascriptjqueryhtmlmaskinginput-mask

Trouble with image click event in jQuery/JavaScript

I am having trouble with my HTML and JS code. I have added images to my HTML page and want to make it so that when the image is clicked, an alert box pops up. However, for some reason, my JavaScript isn't working as expected. Here is a snippet of my ...

javascriptjqueryhtml

What is the best way to display a multiline string returned by a function on different lines within a Vue template?

Need some help with a coding issue. My function gives me output ${a}-${b} and in my template <td>{{ myFunction() }}</td> Currently, it displays A-B in the cell. I want it to show A on one line and B on a new line. I've attempted ${a}&bso ...

javascripthtmlvue.js

Using javascript to dynamically change text color depending on the selected item

I am currently working on a website for a snow cone stand and I want to incorporate an interactive feature using JavaScript. Specifically, I would like to color code the flavor list based on the actual fruit color. The flavor list is already structured i ...

javascripthtmlcsssass

Is there a way for me to insert a variable into the src attribute of my img tag like this: `<img alt="Avatar" src=`https://graph.facebook.com/${snAvatarSnuid}/picture`>`

I need assistance with passing a variable called snAvatarSnuid within the img src tag, specifically after facebook.com/ and before /picture as shown below: <img alt="Avatar" src=`https://graph.facebook.com/${snAvatarSnuid}/picture`> Note: 1) The ht ...

javascripthtmlvue.jsvuejs2web-frontend

Creating blinking or flashing text using CSS 3 is a fun way to add eye-catching animation

Here's the current code I'm using: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timi ...

htmlcsscss-animationsopacity

"Is there a way to align a span element on the same line as an h

I'm attempting to align a text-number (span) next to an entry-title (h2) on the same line, with the entry-meta block on the following line, including having the reading time float left. I could use some help with my CSS implementation. Thank you. Ex ...

htmlcss