Attempting to create a dynamic grid layout utilizing CSS to ensure optimal responsiveness

I am working on creating a webpage layout similar to the one in the link below:

The maximum width for the layout is set to 1600px. However, I am facing challenges in making it fully responsive. This is because all the boxes are given widths in percentages. The first section of the layout is split into two equal parts - 50% on the left and 50% on the right.

Within the 50% on the left, I have included 4 images with each having a width of 50%.

In the 50% on the right, there is a single image with a width of 100%.

While the structure remains responsive when only images are used, adding text below each image in a box with fixed width (66px) causes issues in responsiveness when the screen size is reduced.

Is there a solution to make this layout properly responsive? I attempted making the text box an overlay on the image by positioning it absolutely at the bottom, which resolves the issue but hides the bottom part of the image behind the text box. I want both the image to be fully visible and the text box to remain below it.

Any suggestions or thoughts on how to achieve this? I am open to using JavaScript if it offers a good solution.

htmlcss

Answer №1

*{
  box-sizing: border-box;
}
.fifty {
width: 50%;
padding-bottom: 66px;
position: relative;
}
.parent {
display: flex;
flex-wrap: wrap;
}
img {
width: 100%;
height: 100%;
}
.left {
display: flex;
flex-wrap: wrap;
}
p {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
}
.pb-0 {
padding-bottom: 0;
}
    .child {
      border: 1px solid #333;
    }
<div class="parent">
<div class="left fifty pb-0">
<div class="fifty  child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p>
</div>
<div class="fifty  child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p> 
</div>
<div class="fifty  child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p> 
</div>
<div class="fifty  child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p> 
</div>
</div>
<div class="right fifty child">
<img src="https://dummyimage.com/350x250/ffa0a0/ffa0a0" alt="image"/>
<p>Text Right</p>
</div>
</div>

It seems like this layout might be what you're looking for. If there's anything else you need help with, feel free to ask!

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

adhesive section on the left side with a defined lower boundary

I have a contact div that I made sticky using Bootstrap affix. <div id="contactForm" data-spy="affix" data-offset-top="400"> However, I am unsure of how to limit its bottom to the top of the next div. In other words, I want it to stay in place when ...

javascriptjquerycsshtmlsticky

Adjust the child content within a React component based on the element's width, rather than the overall window size, by implementing dynamic resizing without fixed breakpoints

I am working with a react component that displays a div containing menu items which are aligned horizontally using inline-block. The menu items have text labels "Toy Store", "Configure your Toy", and "About Us". My challenge is to dynamically change the ...

javascriptcssreactjsmaterial-ui

Tips for setting the height of a div within a td to be 100%

I am struggling to make the orange divs in this example stretch out to match the height of the enclosing td element without explicitly setting the parent's height. I have tried using display: flex and align-items: stretch, but I can't seem to ach ...

htmlcss

Trouble with top attribute functionality within animate function

Why does the top attribute in the animate function of JQuery not seem to work, while the opacity attribute functions correctly in the code snippet below? $(function() { $(window).on('scroll', function() { ...

javascriptjqueryhtmlcss

Unexpected JavaScript Bug (with jQuery)

I have an interesting code snippet that captures button clicks and then hides the existing content, revealing the content of the clicked item instead. This code is part of my init.js file along with other functionalities: $(function() { $('#conta ...

javascriptjqueryhtml

Selector matching a descendant element in React styling

I am facing a challenge with using the direct descendant CSS selector within a React inline style element: <style>{` .something>div{ color: blue; } `}</style> While this works fine in development, in production React replaces > ...

cssreactjs

How can the dropdownlist CSS be modified when it is clicked or hovered over?

I recently came across a solution on how to enable a disabled dropdown list when clicked at . I attempted to implement this and added a grey background to the disabled selection. However, I encountered an issue where the background of the dropdown list re ...

jqueryhtmleventsdrop-down-menuradio-button

Guide to setting a dynamic value for an input List property in Angular

How can I render multiple dropdowns in Angular based on the response from an API? Currently, when I retrieve data from the API, I am seeing the same information displayed in both dropdown controls. Is there a way to assign dynamic values to the "list" prop ...

html.netangularjstypescript

What is the best way to adjust the vertical distance between a Material UI FormLabel and Slider element?

I am currently developing a map that includes an image overlay with adjustable opacity. Below is the code for this component: import React from 'react' import PropTypes from 'prop-types' import { MapWithGroundOverlay } from './Map ...

cssreactjsmaterial-ui

How can I choose the first n children up to a certain class using CSS?

Take a look at this HTML : <div class="container"> <a id="1"></a> <a id="2"></a> <a id="3"></a> <a id="4"></a> <a id="5" class="specific"></a> <a id="6"></a ...

htmlcss

What is the best way to redirect in PHP depending on the operating system?

Looking for a simple QR code script implementation that redirects users based on their operating system. Here's what I need: User visits URL Script detects the user's operating system (Android, iOS, other) Redirects Android users t ...

phphtml.htaccesshttp-redirect

Vuetify - Best practices for vertically aligning rows in a v-treeview component

Just getting started with Vue js, so pardon me if this is a silly question. I've scoured the internet and can't seem to find a solution. I'm working on a v-treeview displaying a folder structure, with descriptions of each folder in a separa ...

javascriptcssvue.jsvuetify.js

The conversion of a 2D json array into a string is mistakenly performed

On hand is an outer array that contains 2 arrays within it, making it a 2-dimensional array. This is how the array is initialized: $outerArray = array(); $nestedArray = array("first", "second", "third", "fourth"); $outerArray[] = $nestedArray; $nest ...

javascriptphphtmlajaxjson

Use one tag to abbreviate multiple times

As I create a step-by-step guide, I want the audience to be able to hover over any word in the text and see its definition. However, I only want to define abbreviations once. Is there a method in html or css that allows me to achieve this? ...

htmlcssinstancesabbr

How to center a text box within a div using CSS

Looking for equal margins on top and bottom? Here's how to achieve it: If you have a container div like this: <div id="search"> <input id="txtSearch" type="txt"> </div> Your CSS should look something like this: #search{ m ...

htmlcsscentering

Is there a way to access comprehensive data pertaining to an ID through Ajax?

I need help with an Ajax call. Below is the code I currently have: $.ajax({ async: true, url: 'test/', type: 'POST', datatype: 'text json', data: { id: id, }, success: function(data) { // Retrieve the da ...

javascriptjqueryhtmlajax

Transition effortlessly between web pages with subtle fading effects

I want to implement smooth page transition effects between two web domains: mcpixel.co.uk/new and mcpaper.co.uk. I am the owner of both domains. When a link in the header is clicked, I'd like the page to fade transition to the new page without any whi ...

javascriptphpjqueryhtmlcss

Learn the process of importing data into an HTML list using Flask

Looking to transfer data from a Python variable to an HTML list? Here's a snippet of HTML code that you can test out: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Panel</title> & ...

pythonhtmlflasktelegram

Tips for setting a checkbox as checked by default using AngularJS

I would like the checkbox to be checked by default. HTML : <div class="form-group col-sm-6" ng-class="{ 'has-error': pForm.caddress.$dirty && pForm.caddress.$error.required }"> <label class="contro ...

htmlangularjscheckbox

Why is the Material UI React select not selecting all children except for the last one?

I have a challenge with selecting specific children: const useStyles = makeStyles(theme => ({ icons: { "&>*": { backgroundColor: "red", }, }, })) This is how it looks in JSX: <Grid item> < ...

cssreactjsmaterial-ui