Dynamic CSS containers that adjust according to browser and screen dimensions

Question

Dynamic CSS containers that adjust according to browser and screen dimensions

01) In my attempt to create a row with two content boxes, I encountered an issue. The first box is supposed to display an image and the second box text. However, I am struggling to make it responsive and interactive based on different browser and screen sizes.

I aim to achieve this desired outcome while ensuring it adapts to varying screen sizes:

This is why I included :

<div class="inner"></div>

in an effort to control the maximum dimensions, but unfortunately, it did not work as intended.

HTML:

    <head>
<link rel="stylesheet" type="text/css" href="rich_text.css">
</head>

<div class="inner">
    <div class="feature left">
        <span class="image"><img src="http://SITE.co.uk/images/bg3.png" alt="" />

        </span>
        <div class="content">
            <h2>Total Facebook Image Likes</h2>
            <p>65 </p>
            <ul class="actions">
                <li><a class="button alt" href="#">LINK</a></li>
            </ul>
        </div>
    </div>
</div>

CSS: CSS LINK

02) Another observation I made was that the final output appears distorted if the image size is too large.

I attempted to address this by including:

<span class="image"><img style="height:400px;max-width:400px; src="http://SITE.co.uk/images/bg3.png" alt="" />

However, the image fails to load properly.

html css size interactive

Answer 1

Answer №1

If you're looking to create a responsive design that adjusts based on screen width, consider using percentage or viewport units like %, vh, and vw.

Take a look at this example:

/* For demonstration purposes only */
.row { margin-bottom:1em;}
.red {background:red;}
.blue {background:blue;}

/* Set all divs inside a row to be 50% width */
.row div {
  width:50%;
  box-sizing:border-box; /* Prevent paddings or borders from affecting width calculation */
  padding: 1em;
  color:#FFF;
}

/* By default, divs have auto width, usually spanning 100% of their parent element */
.row.default div { width: auto; }

/* Floating divs to the left will position them next to each other horizontally */
.row.floated div { float:left; }

/* Adding overflow:auto to the parent of floated divs prevents layout issues */
.row.floated { overflow:auto; }

/* Rows can have any width, with children resizing accordingly to always maintain a 50% width relationship with the parent */
.row.maxwidth {max-width:400px;}

/* Children can be styled as inline-block elements instead of floating */
/* Note: Spaces between inline-block elements in HTML can affect layout, so use caution */
.row.inline div {display:inline-block;}

/* Using viewport units */
/* vw = viewport width */
/* vh = viewport height */
/* 50vw = 50% of viewport width */
.row.vw div { width: 50vw; }

<h2>1. Default Behavior</h2>
<div class="row default">
  <div class="red">default block</div>
  <div class="blue">default block</div>
</div>

<h2>2. Percentage Width (based on parent)</h2>
<div class="row">
  <div class="red">50% width block</div>
  <div class="blue">50% width block</div>
</div>

<h2>3.1 Percentage Width + Floating</h2>
<div class="row floated">
  <div class="red">50% width block - floated</div>
  <div class="blue">50% width block - floated </div>
</div>

<h2>3.2 Parent with max-width of 400px</h2>
<div class="row floated maxwidth">
  <div class="red">50% width block - floated</div>
  <div class="blue">50% width block - floated </div>
</div>

<h2>4. Percentage Width + Inline-block</h2>
<div class="row inline">
  <div class="red">50% width inline-block</div><div class="blue">50% width inline-block</div>
</div>

<h2>5. Viewport Width (based on viewport)</h2>
<div class="row vw floated">
  <div class="red">50vw width block - floated</div>
  <div class="blue">50vw width block - floated</div>
</div>

The code is extensively commented to help you grasp the functionality and explore different approaches. I suggest utilizing percentage widths along with floating for simplicity. Alternatively, you can leverage comprehensive grid systems like Bootstrap featuring a ready-to-use 12-column grid without needing to construct a custom layout grid.

Answer 2

If you're looking to create a responsive design that adjusts based on screen width, consider using percentage or viewport units like %, vh, and vw.

Take a look at this example:

/* For demonstration purposes only */
.row { margin-bottom:1em;}
.red {background:red;}
.blue {background:blue;}

/* Set all divs inside a row to be 50% width */
.row div {
  width:50%;
  box-sizing:border-box; /* Prevent paddings or borders from affecting width calculation */
  padding: 1em;
  color:#FFF;
}

/* By default, divs have auto width, usually spanning 100% of their parent element */
.row.default div { width: auto; }

/* Floating divs to the left will position them next to each other horizontally */
.row.floated div { float:left; }

/* Adding overflow:auto to the parent of floated divs prevents layout issues */
.row.floated { overflow:auto; }

/* Rows can have any width, with children resizing accordingly to always maintain a 50% width relationship with the parent */
.row.maxwidth {max-width:400px;}

/* Children can be styled as inline-block elements instead of floating */
/* Note: Spaces between inline-block elements in HTML can affect layout, so use caution */
.row.inline div {display:inline-block;}

/* Using viewport units */
/* vw = viewport width */
/* vh = viewport height */
/* 50vw = 50% of viewport width */
.row.vw div { width: 50vw; }

<h2>1. Default Behavior</h2>
<div class="row default">
  <div class="red">default block</div>
  <div class="blue">default block</div>
</div>

<h2>2. Percentage Width (based on parent)</h2>
<div class="row">
  <div class="red">50% width block</div>
  <div class="blue">50% width block</div>
</div>

<h2>3.1 Percentage Width + Floating</h2>
<div class="row floated">
  <div class="red">50% width block - floated</div>
  <div class="blue">50% width block - floated </div>
</div>

<h2>3.2 Parent with max-width of 400px</h2>
<div class="row floated maxwidth">
  <div class="red">50% width block - floated</div>
  <div class="blue">50% width block - floated </div>
</div>

<h2>4. Percentage Width + Inline-block</h2>
<div class="row inline">
  <div class="red">50% width inline-block</div><div class="blue">50% width inline-block</div>
</div>

<h2>5. Viewport Width (based on viewport)</h2>
<div class="row vw floated">
  <div class="red">50vw width block - floated</div>
  <div class="blue">50vw width block - floated</div>
</div>

The code is extensively commented to help you grasp the functionality and explore different approaches. I suggest utilizing percentage widths along with floating for simplicity. Alternatively, you can leverage comprehensive grid systems like Bootstrap featuring a ready-to-use 12-column grid without needing to construct a custom layout grid.

Dynamic CSS containers that adjust according to browser and screen dimensions

Answer №1

Similar questions

Firebase web authentication is most effective upon the second attempt

Merging the Select and Input elements side by side using Bootstrap grid system

Clicking on Google Code Prettify does not trigger syntax highlighting

`I noticed that the CSS appears differently when viewed in Mozilla compared to Chrome``

Overlay text on top of image with fading transparency when hovering over it

How can one transfer information from a client to a server and complete a form using JavaScript?

I've encountered an issue when attempting to use innerHTML for DOM manipulation

Is it possible to resize an object using JavaScript?

Designing a Scrollable tbody Element while Preserving the Integrity of the tbody Columns

Issues arise when the sub-menu does not function properly and overlaps with other elements of

Ways to ensure that a div, header, container, and other elements completely cover the viewport

What is the process for updating a collection in MongoDB database with PHP?

Styling images side by side with CSS in Internet Explorer

"Creating visual art with processing in 2D using P5

Obtaining data from a website with Java: A step-by-step guide

Tips for deleting part of the URL at the end of all hyperlinks on a webpage

Headerbar overlapping Div when scrolling

Enhance user experience with jQuery UI sortable and the ability to edit content in real

Clicking on a flex card will trigger the opening of a new page where the parsed data will be displayed in a stylish manner using JavaScript

When you click on the button, the section will not be displayed