Responsive CSS Circle Design

Currently, I am using the Bones WP theme as a starting point. Within a 3 column layout, I have three circles placed (one in each column). The structure of each circle is as follows:

HTML

<a href="#" class="services">Text</a>

CSS

a.services {
    margin:40px 0;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    width:320px;
    height:320px;
    border:20px solid #e5f2f7;
    border-radius:100%;
    text-align:center;
    display:inline-block;
}

Since I have specified the dimensions of the circle as 320px X 320px, it does not translate well on mobile devices. I am looking to use percentages instead.

Given that the column containing my HTML is responsive, I would like to set the width to 100%. However, the challenge lies in maintaining equal height and width proportions as the circle scales. At certain breakpoints, it distorts into an elongated oval shape.

cssscalegeometry

Answer №1

I came across this informative article:

This solution is truly remarkable.

CSS Tricks

.box {
    position: relative;
    width: 50%;           /* set desired width */
}

.box:before {
    content: "";
    display: block;
    padding-top: 100%;    /* initial ratio of 1:1*/
}

Grateful for sharing this with me!

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

What steps can be taken to prevent a "Flash of Unstyled Content" when using fixed-width cells in CSS Tables?

My website's design is heavily influenced by CSS tables. This decision was made to ensure consistent cell heights regardless of the content, making alignment easier. Overall, this method has been quite effective. However, there is an issue where the ...

htmlcssfouc

Is it possible to customize the deep elements of ExpansionPanelSummary using styled-components in React?

After digging into the documentation and examples on how to customize Material UI styling with styled-components, I successfully applied styling to the root and "deeper elements" within an ExpansionPanel and ExpansionPanelDetails. However, when attempting ...

javascriptcssreactjsmaterial-uistyled-components

How can an Embedded React + JSS component safeguard generic elements such as <button> and <p> from being affected by the page's style?

I am facing a challenge with a React component that is being embedded in various webpages, either through an extension or as a third-party tool. Most of the styling for this component is done using JSS, ensuring unique class names that cannot be overridde ...

javascripthtmlcssreactjs

jQuery is great at adding a class, but struggles to remove it

When you click on an anchor with the class .extra, it adds the "extra-active" class and removes the "extra" class. However, when you click on an anchor with the extra-active class, it does not remove the extra-active class and replace it with extra. Here ...

javascriptjqueryhtmlcss

Can JSS support creating variables similar to Sass?

Currently, I am developing a project in React and utilizing Material-ui with JSS for styling. In Sass, we have the ability to define variables like $color: rgb(255, 255, 255) for later use. I am curious if it is possible to implement variable usage simi ...

cssmaterial-uithemesjss

Restrict the dimensions of the HTML5 Facebook comment field

I need help limiting the vertical height of Facebook comments generated by the code below. I know how to set the width using the data-width parameter, but I'm not sure how to limit the vertical height of the comment box. Can anyone provide guidance on ...

htmlcssfacebook

Apply a different background color to ion-item when it is clicked

Is there a way to change the background color of an ion-item when it is clicked by a user? Any help on how to achieve this would be greatly appreciated. Here's an example code snippet: <ion-item (click)="openDetail(variant)">{{variant.Product ...

javascriptcssangulartypescriptionic-framework

Avoid changing the size of the button based on the number of words it contains

How can I prevent a button from resizing based on the number of characters inside it? I have noticed that two buttons with the same CSS class are displaying different sizes due to the amount of text inside them. https://i.sstatic.net/BggFW.png https://i. ...

htmlcssbutton

Tips for styling a PHP file using CSS and styling more than one element:1. Begin by creating a

I am currently attempting to style a php file using a linked stylesheet, but I am encountering some difficulties. At the moment, I have the , it will affect either the font or the border.</p> Is there a way to apply multiple styles to elements on a ...

phphtmlcss

Two divs positioned to the right on top of each other

I want to align two divs on the right side of their parent div, one above the other. Here's a visual representation: div#top |-------------------------------------||------------| |div#parent ||div#menu | | ...

csshtmlpositioning

Is it possible to insert JavaScript code with the <link> element?

Is it possible to include JavaScript code using the <link> tag on my website? For instance, if I have a JavaScript file named test.js that includes the simple code alert('hello'); Can I trigger a popup window to appear by using the follow ...

htmlcssjavascript

Issue with background/hero video not adjusting its size

I've been experimenting with creating a page that features a video as the background, but no matter what I try, the video never seems to resize properly. The image below shows how it looks: image in question body { margin: 0; } .hero-se ...

htmlcss

Mozilla Firefox does not support the use of an input text box

I have developed a stopwatch using JavaScript and customized it with a table using HTML and CSS. Upon testing in Chrome, the UI looked great. However, when I tested it in Mozilla Firefox, I noticed that the input text box appeared smaller than expected. ...

htmlcss

Error encountered in Webpack 4 when trying to compile node modules CSS file: Unexpected .(dot) token

I am currently in the process of transitioning my React project from client-side rendering to server-side rendering. Unfortunately, I have encountered an issue with my webpack configuration for CSS that was working perfectly fine in my original project (c ...

cssreactjswebpackreact-ssr

typescript is failing to update CSSRule with the newly assigned background-color value

I am currently working on dynamically changing the CSS style (specifically background-color) for certain text on a webpage. To achieve this, I have been attempting to modify CSSRule by accessing the desired CSSRule based on selectedText. Here is the code s ...

javascriptcssangulartypescript

jquery toggle for partial visibility not functioning properly

Can jquery sliding functions be used to partially show and hide content? In this scenario, there is a list with 7 items but only the first two are visible initially, while the rest are hidden. The goal is to have all 7 items show when the user clicks to v ...

javascriptjqueryhtmlcss

Ways to change the CSS styles of components within App

When my app is in full screen mode, I need to increase the font size for certain components. Within my App.jsx file, I have a variable that adds the "fullscreen" class to the root DIV of the app when triggered. Instead of using a blanket approach like * ...

cssreactjs

Unseen columns within an HTML table are also being included in the export

In my HTML table, I have included a drop-down feature for users to select the row they want to view, along with an export button that allows them to save the data in Excel format. During the exporting process, I encountered an issue where hidden rows were ...

javascriptjquerycsshtml-table

Troubleshooting Issues with CSS3PIE and border-radius

Trying to implement CSS3PIE for my website to enable border-radius in IE8 (and older versions). The code works perfectly on all other browsers except IE. Below is the CSS I am using: #body_text_design{ border:2px solid black; background-color:#CCC ...

htmlcsscss3pie

When the CSS animation has finished in JavaScript

I am currently developing a game using HTML/JavaScript, and I have implemented a "special ability" that can only be activated once every x seconds. To indicate when this ability is available for use, I have created a graphical user interface element. Since ...

javascripthtmlcsscss-animations