Flexibility on smaller screens using Flexbox

On larger screens, I have arranged 4 icons in a row, but on smaller screens (less than 768px), I need to display only 2 icons in a row.

This is my current code :

.welcome {
  display: flex;
  justify-content: space-around;
}

@media (max-width: 768px) {
  /* Code for handling small screens goes here */
}
<section class="container text-center">

  <h2 id="h2-welcome"><strong>Welcome to our website</strong></h2>

  <div class="welcome">
    <div class="welcome-content">
      <i class="fas fa-life-ring fa-5x"></i>
      <p>24/7 Service</p>
    </div>
    <div class="welcome-content">
      <i class="fas fa-tachometer-alt fa-5x"></i>
      <p>Fast & Stable</p>
    </div>
    <div class="welcome-content">
      <i class="fas fa-globe-europe fa-5x"></i>
      <p>Channels from around the World</p>
    </div>
    <div class="welcome-content">
      <i class="fas fa-user-shield fa-5x"></i>
      <p>Secure & Fast</p>
    </div>
  </div>

</section>

htmlcssflexboxresponsive

Answer №1

To ensure new line items, you can apply the flex-wrap: wrap; property and allocate space for two items in a row by using flex: 0 0 50%;.

.welcome{
     flex-wrap: wrap;
}

@media (max-width: 768px) {
     flex: 0 50%;
}

Here is the link to view this code on CodePen: https://codepen.io/alessandroinfo/pen/rEBKMd

Answer №2

To achieve a 50% width for the elements inside the welcome section, you should use flex: 0 1 50%; within the media query for screens up to 768px. Additionally, make sure to apply flex: 0 1 50%; to the .welcome class.

.welcome {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .welcome div {
    flex: 0 1 50%;
  }
}
<section class="container text-center">

  <h2 id="h2-welcome">Welcome to our website</h2>

  <div class="welcome">
    <div class="welcome-content">
      <i class="fas fa-life-ring fa-5x"></i>
      <p>Sherbimi 24/7</p>
    </div>
    <div class="welcome-content">
      <i class="fas fa-tachometer-alt fa-5x"></i>
      <p>Shpejt & Stabil</p>
    </div>
    <div class="welcome-content">
      <i class="fas fa-globe-europe fa-5x"></i>
      <p>Kanale nga gjithe Bota</p>
    </div>
    <div class="welcome-content">
      <i class="fas fa-user-shield fa-5x"></i>
      <p>Sigurt & Shpejt</p>
    </div>
  </div>

</section>

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

Swapping out a sequence of characters in a web address with a different set

Swapping out imgur for filmot, Enter URL - https://i.stack.imgur.com/Uguvn.jpg Click the submit button After clicking submit, a new tab should open with the link .filmot.com/abcde.jpg. <html> <head> <title>input</title> <sc ...

javascripthtml

When using JQuery's :first selector, it actually chooses the second element instead of the first

I'm facing an issue with a JQuery script that makes an AJAX request to the following URL https://djjohal.video/video/671/index.html#gsc.tab=0, which holds information about a video song. My goal is to extract and retrieve all the details from the HTM ...

javascriptjqueryhtmlajaxselector

Transform the CSS to a Mat-Form-Field containing a search box within it

I am currently working with Angular, Angular Material, and SCSS for my project. Here is the front-end code snippet that I am using: <mat-form-field class="custom-form-field" style="padding-top: 5px;padding-bottom: 0px; line-height: 0px; ...

cssangularangular-material

WordPress footer widgets appearing misaligned

I have made a child theme for Twenty Thirteen and am in the process of making some updates to it. My development site is essentially a replica of the live site. The only modification I made in the footer section was to change the widget title styles, but I ...

htmlcsswordpress

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

Populate the content of the child DIV to match the grid layout as a whole

I am attempting to control the layout of the grid on my website using CSS. By utilizing Bootstrap 4, I have created two divs with equal height using display:grid. However, I am facing difficulties in managing the child elements within these divs. I am tryi ...

htmlcssbootstrap-4

How can I create additional white space at the end of my webpage with CSS grid?

Looking for some help with CSS as a beginner here. I'm facing an issue where my CSS is creating excessive blank space at the bottom of my document, almost 60% of it. Could this be due to incorrect parent parameters or the children elements? This is m ...

htmlcsscss-grid

When utilizing CKEDITOR, the default TEXTAREA is obscured, and CKEDITOR does not appear

I am trying to incorporate CKEDITOR into my project. I have added the ckeditor script in the footer and replaced all instances of it. <script src="<?= site_url('theme/black/assets/plugins/ckeditor/ckeditor.min.js') ?>" type="text/javasc ...

javascriptjqueryhtmlcssckeditor

Incorporate Zurb Foundation seamlessly into your current codebase without causing any

While Foundation is great for creating whole page designs, it may not be the best choice when you just need a small snippet to add into existing HTML and CSS code. In Foundation's _global.scss file, there are global settings such as: html, body { h ...

htmlcsszurb-foundation

Tips for maintaining interactivity after a page refresh

$(document).ready(function () { $("#2").click(function () { $("#content").load("{% url 'about' %}"); }); $("#3").click(function () { $("#content").load("{% url ...

javascripthtmljqueryjquery-uijquery-plugins

Transfer various field values to jQuery

I am looking to send multiple field values to jQuery for validation, but currently only receiving the value of the changed field. How can I pass both field values to jQuery? Enter some text: <input type="text" name="txt1" value="Hello" onchange="myF ...

javascriptjqueryhtml

Unable to convert cursor to jpg format

I am facing an issue where I have a jpg file stored in the same folder as my styles.css, and I want to change the cursor on a webpage to this particular jpg file. Despite my efforts, it seems like the cursor is not changing as expected. Currently, I am us ...

htmlcss

CSS: Specify child element to have a full width of 100%, but appear only 50% wide

Looking at this page, it seems that the header photo is not displaying full width. #wrap { width: 990px; } #content-wrap { display: flex; } .image-header { display: block; width: 100%; } .image-header img { width: 100%; height: auto; } .cont ...

cssflexbox

Retrieving HTML table data using PHP

In the scenario where I have an HTML form with a table like the one below: <form method="POST" action="a.php"> <table name="dataTable"> <tr> <td>row one col one</td> <td>row one col two</td> <td>row o ...

phphtml

Expanding the MatBottomSheet's Width: A Guide

The CSS provided above is specifically for increasing the height of an element, but not its width: .mat-bottom-sheet-container { min-height: 100vh; min-width: 100vw; margin-top: 80px; } Does anyone have a solution for expanding the width of MatBott ...

javascripthtmlcssangularangular-material

I am interested in creating a table that can toggle between show/hide mode with a plus/minus feature

$(document).ready(function() { $("#t1").hide(); // hide table by default $("#close").hide(); //hide the minus button as well if you only want one button to display at a time $('#sp1').on('click', function() { //when p ...

javascripthtmlcssbootstrap-4

How can I show a div beneath a row in an HTML table?

Check out the code snippet below: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <style type="text/cs ...

javascriptjqueryhtml

Utilize a Dropdown Menu to Retrieve Information from a Database and Display the Results on Either the Current Page or a Separate Page

My PHP page includes a code snippet that generates an HTML table: <table> <thead> <tr> <th class="wheniwant">Date</th> <th class="wheniwant">Income Amount</th> <t ...

phpmysqlhtml

Create a CSS popup alert that appears when a button is clicked, rather than using

Is there a way to customize CSS so that the popup alert focuses on a button instead of just appearing like this? https://i.sstatic.net/r25fd.jpg I have implemented this type of validation for a text box: <div class="form-group"> <label class="co ...

javascriptjqueryhtmlcss

Displaying an alert on a webpage that shows a label input using JavaScript and

I'm currently working with HTML5 and JavaScript and I'm facing a challenge. I want to create a feature where users can input any word into a label, and when they click on a button, an alert is triggered with the given text. However, despite my ...

javascripthtml