"Embracing Flexbox for a fully responsive mobile experience

What's the best way to make this flexbox design responsive for mobile devices? I want the layout to look consistent across both desktop and mobile screens. The issue seems to be related to the responsiveness of the flexbox and the smaller size of mobile screens. How can I address this problem effectively? Could adjusting the width of the flexbox help?

View desktop version

View mobile version

    <style>

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

.btn-allow{
  border-radius: 80px;
  background-image: linear-gradient(135deg, #5F25A1, #4440BC);
  color: white;
  transition: 0.5s ease;
  font-size: 18px;
  line-height: 1em;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.1em;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  border: 1px solid #4440BC;
  height: 60px;
  width: 100%;
  padding: 20px 30px;
  margin-right: 50px
}
btn-login:focus{
  color: #3498db;
  box-shadow: inset 2px 2px 5px #BABECC,
             inset -5px -5px 10px #ffffff73;
}
.btn-deny{
  border-radius: 80px;
  background-image: rgb(217, 217, 217);
  color: rgb(26, 26, 26);
  transition: 0.5s ease;
  font-size: 18px;
  line-height: 1em;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.1em;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  border: none;
  height: 60px;
  width: 100%;
  padding: 20px 30px;
  margin-left: 50px
}
.btn-deny:focus{
  color: #3498db;
  box-shadow: inset 2px 2px 5px #BABECC,
             inset -5px -5px 10px #ffffff73;
}
.btn-allow:hover{
  color: #3498db;
  box-shadow: inset 2px 2px 5px #0a0a0a27;
 
}
.fa-question-circle::before {
  cursor: pointer;
}
    .d-flex {
      display: flex;
      flex-wrap: wrap;
      padding: 1rem;
      flex-direction: column;
      width: 100%;/*can edit as per requirement*/
    }

    .d-flex .col .child {
      display: flex;
      flex-wrap: wrap;
    }

    .d-flex .col {
      display: flex;
      flex-wrap: wrap;
      padding: 1rem 0;
      justify-content: space-between;
    }

    .d-flex p {
      padding: 0 1rem;
    }
    </style>
    <!--ADD THIS LINE TO GET FONTAWESOME ICONS IN HEAD TAG-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <div class="d-flex">
      <div class="col">
        <div class="child">
          <span class="fas fa-user"></span>
          <p>View, manage and publish your personal data</p>
        </div>
        <span class="fas fa-info"></span>
      </div>
      <div class="col">
        <div class="child">
          <span class="fas fa-user"></span>
          <p>View, manage and store your Contacts</p>
        </div>
        <span class="fas fa-info"></span>
      </div>
      <div class="col">
        <div class="child">
          <span class="fas fa-user"></span>
          <p>View your technicaldata*</p>
        </div>
        <span class="fas fa-info"></span>
      </div>
      <div class="d-flex">
     <div class="col">
      <div class="child">
<button class="btn-deny" type="submit" name="deny" >Deny</button></div>
<div class="childallow">
<button class="btn-allow" type="submit" name="allow" >Allow</button></div>
  </div>
</div>
    

Answer №1

To ensure your website is mobile responsive, utilize CSS Media Queries to adjust the appearance for different screen sizes.

An example of a media query:

@media screen and (max-width:650px;){
.col{
    width:100%;
    }
}

Using this method allows you to customize styles based on the screen size of the device being used.

Here are the typical screen resolutions for various devices:

  • Mobile (Smartphone) - max-width: 480px.
  • Low Resolution Tablets and iPads - max-width: 767px.
  • iPads in portrait orientation - max-width: 1024px.
  • Desktops - max-width: 1280px.
  • Extra large screens - max-width: 1281px and above.

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

Overflow issue with Mui TabList within a grid container

I have encountered an issue with the tabs overflowing beyond the visible width when wrapped in the TabsWrapper in the code below. I always render the tabs in a similar wrapper and wonder if there is a way to override certain styles in ScrollableTabs to ach ...

Jquery executes b.fn.b.init[102] and displays the output

My task involves selecting multiple elements, all of which have the class "org-box". Within each box, there is a link that I need to capture the href from. Here is my code: $("a.org-box").click(function (e) { e.preventDefault(); var link = $(this).attr( ...

The height on iPad Chrome is displaying incorrectly

iPad Pro(11-inch), iPadOS version: 16.6.1, Chrome version: 116.0.5845.177 I tried running a simple html file on my iPad and encountered an issue. Despite setting the height to 100vh, a vertical scrollbar appeared on the right side of the screen allowing ...

downsides of scrolling text functionality

Sure, it may seem evil. But what makes it so? Is it because all browsers support it? Which aspx asp.net controls are restricted in this tag? What are the reasons for avoiding this tag? ...

What is the best way to implement a sidebar closing animation?

Utilizing both react and tailwindcss, I successfully crafted a sidebar menu that elegantly appears from left to right when the user clicks on the hamburger icon. However, my attempts to create a reverse animation as the sidebar disappears from right to lef ...

Establish height and width parameters for creating a dynamic and adaptable bar chart with recharts

I am currently facing an issue with recharts while trying to implement a BarChart. The setting width={600} and height={300} is causing the Barchart to be fixed in size, rather than responsive. How can I make the BarChart responsive? I attempted using per ...

Is it possible to blur all elements of a form except for the submit button?

Can someone help me with a form issue I am facing? <form> <input type="text>' <input type="submit">' </form>'' After submitting the form, I would like to blur the entire form: $(this).closest('form') ...

The NVDA screen reader is unable to detect visually hidden text

In the code snippet below, part of a table is shown where some text is meant to be displayed visibly and some should be visually hidden. However, it seems that the screen reader does not detect the visually hidden text when hovering over it with a mouse. T ...

Assistance needed for disabled JavaScript

I'm currently working on a small application where I need to display some text wrapped in 3 divs. The goal is to only show one div at a time and provide users with prev and next buttons to switch between them. However, when JavaScript is disabled, I w ...

I am encountering a continuous css ParserError while trying to compile my react project

I'm having trouble with the compilation of my React project. While everything runs smoothly with npm start, I encounter an error during compilation: npm run build <a href="/cdn-cgi/l/email-protection" class="__cf_ema ...

What steps can I take to ensure that the content remains intact even after the page is

Hey there, I hope you're having a great start to the New Year! Recently, I've been working on creating a calculator using HTML, CSS, and JavaScript. One thing that's been puzzling me is how to make sure that the content in the input field do ...

"Utilize a 3-column layout with the center column aligned to the

I am working on an interesting task. <div class="slider"> <div class="1s">1st slide</div> <div class="2s">2nd slide</div> <div class="3s">3d slide</div> </div> Here is the CSS code: .slider div { ...

I'm having trouble getting the second controller to function properly in my AngularJS application

I've been looking everywhere for a solution on how to implement two controllers, but I can't seem to get it working. Could there be something wrong with my HTML or could the issue lie in my script? Here is the JavaScript code: <script> v ...

Automatic Addition of Row Numbers Enabled

I'm currently exploring coding and experimenting with creating a scorekeeper for family games. I've managed to add rows dynamically and automatically sum up the entered information in the "total" row at the bottom. However, I'm facing an iss ...

Encountered an error while attempting to load resource in Node.js

I'm currently working on a project utilizing Node js (Express...). Let me do my best to explain the issue I am encountering. My work is being done on localhost, and the main page of my index.html has buttons that lead to other pages when clicked. I c ...

Excessive Expansion of Website Width

Initially, I crafted a website on my local server, and it had the ideal width. Afterwards, I uploaded it to the live server and made some design modifications. To my surprise, there is now an unexpected scroll bar at the bottom of the page, causing the s ...

What is the best way to transmit the "theme" property to "Components" within a next.js application?

I'm currently working on a next.js app and dealing with the _app.tsx file: import '../styles/globals.css' import type { AppProps } from 'next/app' import { createTheme } from '@arwes/design' import { ThemeProvider, Global ...

ChessboardJs: JavaScript Boards Function Properly on Initial Use Only

Update: The page code can be accessed via my page URL. I'm unsure where the issue lies. Your assistance is appreciated. Issue: Initially, when clicking on the chess puzzles page, everything works fine. However, upon re-clicking from the homepage, th ...

In iOS devices, the Ionic framework restricts the ability to open links in a new tab using the ng-href attribute

In my quest for mobile functionality, I'm aiming to implement a feature on devices where tapping will open 'codepen.io' (triggered by ng-click), and tap and hold will display a context menu with the option to 'Open In New Tab', red ...

What's the best way to arrange my containers for optimal placement?

I'm attempting to create a Thymeleaf template for rendering a printable PDF. Here is what I currently have: <html xmlns:th="http://www.thymeleaf.org" > <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" ...