Flexbox divs that adapt to different screen sizes

Hello everyone, I need help with a school project where I have to make blocks responsive and change their layout based on screen width. Specifically, above 1024px they should be in 2 horizontal rows, and below 1024px in 2 vertical rows, always spelling out 'LOI'. I've managed to achieve this using flexbox and a media query to change the flex-direction. However, now I want the blocks to be truly responsive so that there are no gaps between them when resizing the screen. Does anyone know how to accomplish this? Thank you!

main {
  max-width: 1024px;
  margin: auto;
}

.blokken {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 1200px;
  align-content: stretch;
}

@media screen and (min-width: 1024px) {
  .blokken {
    flex-direction: row;
  }
}

.letter {
  width: 300px;
  height: 300px;
  margin: 5px;
  background-color: #eee;
  border: 5px solid black;
  font-family: sans-serif;
  font-size: 5em;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25%;
  overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Netherlands Urbanized</title>
</head>

<body>
  <main>


    <h2 id="letterblocks">Letter Blocks</h2>

    <div class="blocks">
      <div class="letter">L</div>
      <div class="letter">O</div>
      <div class="letter">I</div>
      <div class="letter">L</div>
      <div class="letter">O</div>
      <div class="letter">I</div>
    </div>


  </main>

</body>

</html>

Answer №1

To ensure that the elements always remain centered, you can utilize the align-content: center property. Particularly when the flex-direction: column is applied for screens below 1024px. In such instances, align-content and align-items will be used for horizontal alignment.

main {
  max-width: 1024px;
  margin: auto;
}

.blokken {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 1200px;
  align-content: center;
  max-width: 100%;
  justify-content: center;
}

@media screen and (min-width: 1024px) {
  .blokken {
    flex-direction: row;
  }
}

.letter {
  width: 300px;
  height: 300px;
  margin: 5px;
  background-color: #eee;
  border: 5px solid black;
  font-family: sans-serif;
  font-size: 5em;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25%;
  overflow: hidden;
}
<main>
  <h2 id="letterblokjes">Letterblokjes</h2>
  <div class="blokken">
    <div class="letter">L</div>
    <div class="letter">O</div>
    <div class="letter">I</div>
    <div class="letter">L</div>
    <div class="letter">O</div>
    <div class="letter">I</div>
  </div>
</main>

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

the best way to transfer a JavaScript value to a PHP page

I am experiencing an issue with an undefined function in my PHP page. I have tried everything and it just doesn't seem to work for me. Can anyone please assist me with this problem? <!DOCTYPE html> <html> <head> <scrip ...

How can I capture a screenshot of the div displaying pictures uploaded by the user on the frontend?

Take a look at this code snippet. It allows users to upload images, move them around, resize, and rotate them once uploaded. $(function() { var inputLocalFont = $("#user_file"); inputLocalFont.change(previewImages); function previewImages() { ...

What is the best way to create a button that can show or hide an unordered list with a click?

This is where you can find my special button: <body> <h3 class="paragraph">To remove duplicates in 2 Javascript arrays (refer to the readme), combine the results into a new array and display the unique names in an unordered list below ...

Bypass the save as dialogue box and initiate automatic file download without interruption

Working on an Angular 1 web application, I am utilizing the HTML download Attribute. Using the code snippet below: <a href="/images/myw3schoolsimage.jpg" download>, I am enabling users to download presented data as an Excel spreadsheet. My goal i ...

Utilizing the Replace function just once

I am currently using the Avada Theme on Wordpress and I am attempting to use jQuery to translate the social media privacy labels/content. Everything is working smoothly except for one issue. Below is the HTML code: function translate() { jQuery(".fus ...

Is it possible to showcase a notification as a popup or alert in Django?

I'm working on a form in Django that redirects to itself after submission. I want to show a message saying "You have entered (work_area)" as a popup or alert that users can close. However, my current setup only displays the message within the HTML aft ...

Transferring the link value to an AJAX function when the onclick event is triggered

I have a link containing some data. For example: <li><a href="" onclick="getcategory(this);"><?php echo $result22['category']; ?></a></li> I need this link to pass the value of $result22['category']; to ...

What is the best way to turn off the annoying pop-up messages that show up for input validation, specifically the one that says "Please complete

Currently using Angular 2, my form has input fields similar to this simplified version: <input class="body-text1" type="text" [(ngModel)]="model.name" name="name" required minlength="1"> <!--more inputs like this --> Although I have implement ...

I'm having trouble getting my CSS and HTML to connect properly, and I'm not sure what the issue is

Hi there, I'm having some trouble with my HTML code. I haven't even started building my website because I can't seem to connect it to the CSS file, and I have no idea why. I'm using Aptana Studio 3 by the way. <head> <titl ...

Is it possible to combine two conditions using CSS?

Hello, I have a question about CSS. In my navigation bar, I have 3 links with different styles: #p1 { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 45px; font-weight: bolder; color: #999999; text-dec ...

Pressing "Enter" initiates the submission of the form

My webpage contains a stylish GIF displayed as a button within a div. The script inside the div triggers a click event when the ENTER key is pressed, using $(this).click(). This click action has its own functionality. Everything functions smoothly in Fire ...

Why is it important to incorporate the CSS property background-repeat: repeat; into our code?

It is believed that if you don't expressly mention the background-repeat in CSS styling, browsers will automatically set it as background-repeat: repeat. With this default behavior in place, one might wonder why there is even a need for a separate ba ...

Three-dimensional.js and components of the design

Looking for advice on how to manipulate individual parts of a 3D model in Three.js. My model is made up of various components that I need to control separately. Any tips or suggestions would be greatly appreciated. Thank you! ...

Card carousel rotation

Apologies for the vague title, I'm unsure how to properly label my issue. I have a section set up with cards, but I'm aiming to create something resembling a menu that functions like a carousel. Essentially, I want to include right and left arro ...

Steps to eliminate validation following the clearing of input fields

This is the code I've written for live validation using AJAX in an input field. My issue is that I want the validation to be removed if all inputs are deleted. <script type="text/javascript"> $(document).ready(function(){ ...

Animating object on display and returning it with keyframes

Given the code snippet below: <div class="leftBox"> <div class="mainNode" ></div> </div> <script type="text/javascript"> $('.mainNode').click(function() { var element = $('.mainNode'); if (!ele ...

Improving iframe functionality in AngularJS

I've been experimenting with AngularJS to dynamically update an iframe whenever a query is triggered. It works like this: a query is made, the embed link is fetched from the database, and then it's used in the iframe alongside the title and video ...

How to make a Material UI Dialog Box automatically expand to fit the Dialog Content Area

In my project, I am working on a Dialog component which has a maximum width and a minimum height. Inside the DialogContent, I want to have a Box element that stretches to fill out the remaining space of the DialogContent. The goal is to have a background i ...

CSS: Breaking free from the constraints of a Bootstrap-inspired grid layout

Looking to create a template with a background on the left side that extends to the edge of the page within an 8 of 12 bootstrap columns setup. The remaining 4 columns on the right will not have a background. This layout should be responsive, stacking on t ...

A picture placed side by side with a list

Could someone please help me figure out what I'm doing incorrectly? <div class="row"> <ul class='list-group .col-md-6'> <li>1</li><li>1</li><li>1</li> </ul> <div> ...