Help with Crafting Responsive CSS Design

Question

Help with Crafting Responsive CSS Design

I am seeking help to better comprehend the concept of responsive design through this question. Let's imagine a header on a standard desktop screen. Within that, I have a div element containing the information I wish to showcase.

.hdrinfo{
    width: 51%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
}

When this div displays on a tablet, my goal is for its width to be 75%, and on a smartphone, it should expand to 100%. Despite numerous attempts at media queries based on extensive reading, I've been struggling with implementing this. Can anyone guide me in the right direction?

UPDATE: I have modified the CSS to make it more evident whether the queries are functioning correctly:

.hdrcntr{
        width: 52%;
        height: 100%;
        margin: 0 auto;     
        background: green;
}
@media only screen and (max-width:992px){
    .hdrcntr{
        width: 75%;
        background: steelblue;
    } 
}
@media only screen and (max-width:412px){
    .hdrcntr{
        width: 100%;
        background: tomato;
    } 
}

My approach involves using different background colors as indicators: green for default, steelblue for iPad, and tomato for Samsung S8+. This method works well for both desktops and iPads. However, despite trying to cater to the Samsung S8 dimensions provided by official specs and other sources, I haven't been successful in getting the correct display (always shows steelblue).

css responsive-design media-queries

Answer 1

Answer №1

Here is an example of how the max-width values can be adjusted based on different devices. It's important to keep in mind that the rules will override each other depending on the order they are written, especially for devices with a width less than 400px.

.header{
    width: 50%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
}
@media (max-width: 768px) {
  .header {
     width: 75%;
  }
}
@media (max-width: 400px) {
  .header {
     width: 100%;
  }
}

Answer 2

Here is an example of how the max-width values can be adjusted based on different devices. It's important to keep in mind that the rules will override each other depending on the order they are written, especially for devices with a width less than 400px.

.header{
    width: 50%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
}
@media (max-width: 768px) {
  .header {
     width: 75%;
  }
}
@media (max-width: 400px) {
  .header {
     width: 100%;
  }
}

Answer 3

Answer №2

Encountered an issue where the @media query was not responsive on mobile phone displays, despite even on devices with smaller pixel dimensions. To ensure proper display, remember to include the <meta name> in the <head> section of every HTML page:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
... continue with your page

The width=device-width attribute adjusts the page width based on the device's screen size (which varies per device) - as noted on w3school's site.

The initial-scale=1 attribute sets the default zoom level when initially loaded by the browser - as mentioned on w3schools site.

Further information can be found here: https://www.w3schools.com/cSS/css_rwd_viewport.asp

Additionally, it is possible that the presence of the keyword only could be causing issues. I haven't encountered any problems using media queries like this:

@media screen and (max-width: 992px) { }

This example is sourced from a different discussion thread: Why are my CSS3 media queries not working on mobile devices?

Hoping this information aids in resolving your dilemma.

Answer 4

Encountered an issue where the @media query was not responsive on mobile phone displays, despite even on devices with smaller pixel dimensions. To ensure proper display, remember to include the <meta name> in the <head> section of every HTML page:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
... continue with your page

The width=device-width attribute adjusts the page width based on the device's screen size (which varies per device) - as noted on w3school's site.

The initial-scale=1 attribute sets the default zoom level when initially loaded by the browser - as mentioned on w3schools site.

Further information can be found here: https://www.w3schools.com/cSS/css_rwd_viewport.asp

Additionally, it is possible that the presence of the keyword only could be causing issues. I haven't encountered any problems using media queries like this:

@media screen and (max-width: 992px) { }

This example is sourced from a different discussion thread: Why are my CSS3 media queries not working on mobile devices?

Hoping this information aids in resolving your dilemma.

Answer 5

Answer №3

To achieve the desired outcome, consider using min-width and max-width properties in your code.

@media screen and (min-width:413px){
    .hdrcntr{
        width: 75%;
        background: steelblue;
    } 
}
@media screen and (max-width:412px){
    .hdrcntr{
        width: 100%;
        background: tomato;
    } 
}

Visit this link for a demonstration.

Answer 6

To achieve the desired outcome, consider using min-width and max-width properties in your code.

@media screen and (min-width:413px){
    .hdrcntr{
        width: 75%;
        background: steelblue;
    } 
}
@media screen and (max-width:412px){
    .hdrcntr{
        width: 100%;
        background: tomato;
    } 
}

Visit this link for a demonstration.

Help with Crafting Responsive CSS Design

Answer №1

Answer №2

Answer №3

Similar questions

Integrate the dForm plugin with a convenient time picker widget

Using SVG as a background image on Internet Explorer with zoom capabilities

When the parent element is centered, align the children to the left

Utilizing Tailwind CSS for creating a responsive layout on a Next.js application

Changing the size of a responsive navigation bar with React and adjusting it based on the window.scrollY position switches between collapsed and un

Guide to Wrapping Inner or Wrapping All Elements Except for the Initial Div Class

Tips for wrapping a div element around another div at the top left corner

Media queries for Tailwind CSS in a Node JS application do not function properly when viewed on a mobile device

Update the appearance of a cell if the value within it is equal to zero

Tips for creating semi-circular shapes using CSS gradients

Emphasizes the P tag by incorporating forward and backward navigation options

How to effectively use flexbox to resize child elements in a CSS layout

Design a dynamic div element for banners that adjusts to different screen

The case of the elusive Firefox overflow: hidden glitch

Achieving Vertical Alignment of Text and Icon in the Same Line Using HTML and CSS

Coordinate the timing of CSS animation with the loading of the page

Display words on screen and then alter hue using HTML and CSS

Verify if the second list item contains the "current" class

The Next.js Image component does not implement the maxWidth attribute

Concealing subcategories within a responsive menu using jQuery