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:

https://i.sstatic.net/C14q5.png

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

Convert an HTML file to .msg format or prevent the send button from functioning in Outlook messages

Issue with React router not functioning correctly when dealing with dynamically created anchor tags utilizing jquery

Ensuring draggable div remains fixed while scrolling through the page

The tooltip of the Material UI IconButton is displaying incorrectly

What could be the reason for my clickable div not functioning as a link in this particular code?

Distinguishing Font Sizes in Safari Compared to UIWebView

Developing an HTML table dynamically with JavaScript and incorporating CRM data

Regular expression for matching a CSS definition that includes a specific name and value

Spin and flip user-submitted images with the power of HTML5 canvas!

Utilizing Webpack for Effortless Image Loading in Angular HTML

Tips for positioning three child divs horizontally within a parent div with flexible dimensions and arranging each one separately

Collaborative Vue component: Clients need to manually import the CSS

Dealing with a jQuery/JavaScript issue involving thumbnail images

How to retrieve the selected values of specific option tags using jQuery?

Pandoc has removed all the line breaks in this text

Troubleshooting problem with Angular Materials' md-datepicker not displaying correctly in wide browser windows

In Bootstrap 4.4.1, there is a known issue where HTML may not be rendered properly after a certain section

Ways to restrict input text to a specific set of values

An alternative method to confirm the checkbox selection without physically clicking on it

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