Square Power Box

I have been attempting to create two equal sections, one displaying an image and the other showing text, both maintaining a square shape with identical width and height. I am using the Avada theme on Wordpress along with Element Builder and custom CSS to achieve this, but unfortunately, I have not been successful so far.

On this particular page, you can see that the result is not square but responsive:

I have come across some code snippets that do force a div to be square, but they do not take the other square into consideration. Should I resort to using jQuery for this task, please advise as I have not explored that option yet. My preference is to accomplish this using CSS if possible.

Any suggestions or ideas would be greatly appreciated!

Best regards, Fredrik

csswordpress

Answer №1

If you apply the display:flex property to the square wrapper and set a height for it, the flex-child element will always inherit the height from its immediate flex parent. To make this flex grid responsive, you can integrate some media queries and utilize the flex-wrap property.

body {
  padding: 20px;
  box-sizing: border-box;
}

.flex {
  display: flex;
  justify-content: center;
  border: 1px solid black;
  height: 250px;
}

.section {
  align-items: center;
  width: 50%;
  border: 1px solid black;
  margin: 5px;
}
<div class="flex">
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
</div>

Answer №2

If you're looking to understand aspect ratios and responsive blocks better, check out the following resources:

Learn how to maintain the aspect ratio of an element with CSS.

Explore more about Aspect Ratio Boxes Advanced

<div class="container"> 
 <div class="text">1:1 Aspect ratio</div> 
</div>

.container {
   background-color: red;
   position: relative;
   width: 100%;
   padding-top: 100%; /* 1:1 Aspect Ratio */
}

.text {
   position:  absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   text-align: center;
   font-size: 20px;
   color: white;
}

Check out this Example for a hands-on experience

Answer №3

Appreciate the assistance! I ultimately decided to use media queries at 200px and 300px intervals to maintain a square shape. It may not be the most elegant solution, but it gets the job done.

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

Using Javascript to generate a button that randomly chooses links within the webpage

Looking for help with JavaScript to select a link when a button is clicked on the page? Check out my code and let me know what I'm doing wrong. For the full code, visit: here HTML <!doctype html> <html lang="it" xmlns="http:/ ...

javascripthtmlcssfunctionif-statement

Animate the sliding of divs using the JavaScript animation function

I've designed some boxes that function similar to notifications, but now I want to smoothly slide them in from the left instead of just fading in. I know that I need to use .animate rather than .fadeIn to achieve this effect. The code snippet I&apos ...

javascriptjquerycssanimation

Enhancing 2D video viewing with Threejs interactivity

I want to create an interactive 2D video using three.js and maintain the aspect ratio of the video when resizing the browser window. Here is the code I am currently using: var camera, scene, renderer; var texture_placeholder, distance = 500; init() ...

javascriptcssvideothree.js

The CSS3 rotation transform will rotate by an angle of n degrees

I'm currently working on a cube-like element made up of 4 divs that I am rotating using CSS3 transforms (limited to -webkit for a Chrome extension). But there's an issue, if you visit http://jsfiddle.net/CxYTg/ and click through "one", "two", "t ...

htmlcsscss-transforms

What is the best way to create an adaptive <pre> tag for ASCII art without using media queries?

Currently, my username is displayed as an ASCII art banner/header and I am looking to enhance its responsiveness. Instead of relying solely on media queries, I am exploring the possibility of making it scale within a CSS grid container. This approach would ...

htmlcsscss-grid

Tips for changing the appearance of an entire table by overriding the table tr:nth-child styling

In the CSS code below, I currently alternate background colors for table lines by default and can specify individual rows to not alternate. Is there a way to implement this at the table level instead of per row? Essentially, I want to define something at ...

htmlcss

Design images with rounded corners using CSS

I'm looking to design an image avatar similar to the contact avatars on Skype. Can someone assist me with this? I have tried using border radius-boundary, but I haven't had much luck. ...

htmlcsscss-shapes

Chrome on IOS: Experiencing screen freezing while scrolling

1) I'm working with Material UI in React JS. I have added a simple scrollable code, but when I reach the bottom of the screen/scroll, it freezes. 2) I also tried it with a simple HTML page and it worked correctly. <div style={{ ...

javascripthtmlcssreactjsmaterial-ui

Ways to assign a default background shade to a webpage with a transparent background

My page has a completely transparent background achieved by using: body { background:none transparent!important; } When I display this page in a transparent iframe on another site, I can see the website's background through the page. However, if ...

htmlcss

Rowing and Columning with Bootstrap

Hey there! I'm currently working on creating some stylish boxes to showcase text and possibly an image background. However, I'm encountering an issue where the boxes are not aligning correctly on smaller screens. https://i.sstatic.net/JoYtj.jpg ...

htmlcss

The CSS provider for Gtk+3 is malfunctioning

I've been attempting to set an image as the background of a GtkBox using a CSS provider, and also customize the style of some label text, but no matter what I try, nothing seems to work. Below is the content of my custom.css file: GtkBox#Home_Princi ...

csscgtk3

Placement of navigation bar on top of picture

Creating a gaming website and encountering challenges with text alignment. The goal is to have the navbar text positioned on top of a customized navbar background. Current appearance navbar example <!DOCTYPE html> <html> <head> ...

htmlcss

What's causing Angular to not display my CSS properly?

I am encountering an issue with the angular2-seed application. It seems unable to render my css when I place it in the index.html. index.html <!DOCTYPE html> <html lang="en"> <head> <base href="<%= APP_BASE %>"> < ...

javascripthtmlcssangulartypescript

Creating a Dynamic System for Converting Numeric Digits to Alphabetical Grades

Utilizing the code provided below, you can calculate a user's grade point average ranging from A+ to E-. Is there a way, within the following fiddle, to not only display the GPA but also convert it into a corresponding letter grade from A+ to E-? Curr ...

javascriptjqueryhtmlcssdynamic

What causes a span with absolute positioning to not be correctly positioned within a span with relative positioning in Firefox, unless it is displayed as inline-block or similar?

Can you explain why the code below doesn't display correctly in Firefox unless the parent span is set to display as inline-block? When inspecting the layout of the absolutely positioned span, it shows the number 184 instead of 197 on the right side. A ...

htmlcssfirefoxabsolute

Ensuring that all of the content is adaptable across various devices, from smartphones to high-definition 1080p screens

I am currently working on making my entire content responsive. While I have successfully made the background responsive using different @media resolutions, I am facing an issue with the image in the foreground that is not scaling accordingly. I tried putti ...

htmlcssresponsive-designbootstrap-5

Provide the email address to use on the forum

Is there a way to code an email address in HTML that will be invisible and undetectable by forums? Thank you in advance. I'm looking for a more advanced solution like this one! <h>mariaburkke76</h><h><h><h><h>< ...

javascriptphpcsshtml

Looking for a way to identify when a DOM element is resized as a result of web fonts loading asynchronously?

Within this div element lies text styled with a custom font via CSS's @font-face attribute. The issue arises when the font hasn't loaded yet, causing a delay in updating the font style of the text within the div. As a result, taking measurements ...

javascripthtmlcss

Scroll down 1 page using Javascript and Jquery

Hey there! I'm looking to create a website where a small scroll on the mouse wheel will take the site to the next anchor. It's kind of hard to explain, but one good example is the Tesla Model 3 website on the US site here. Does anyone have any t ...

javascriptjqueryhtmlcss

Issue with horizontal scrolling functionality in DataTables

I have a table with over 10 columns, and I am using datatables to display the data. I have enabled horizontal scrolling due to the large number of columns, but the scroll is not appearing. Can someone please assist me with this issue? Here is a screenshot ...

jquerycssdatatables