Utilizing Flexbox to create a layout with a full-width block followed by two blocks containing images below

I am looking to achieve a design similar to this: https://i.sstatic.net/MxzIS.png

The layout should remain consistent across mobile devices:
featuring a 100% width block with 2 images and buttons below it.
Images should span the full width of the block.

The current code has excessive spacing between blocks, causing issues at lower resolutions.

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #e2eaf4;
  padding: 10px;
          flex-direction: row;

}

.child {
  display: inline-block;
  font-family: "Open Sans", Arial;
  font-size: 20px;
  color: #FFF;
  text-align: center;
  background: #3794fe;
  border-radius: 6px;
  padding: 20px;
  margin: 12px;
 
}

.child:first-child {
  width: 100%;
}
.link {
background-color:white;}
<div class="container">
  <div class="child">Child</div>
  <div class="child"><img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg"width="200" height="200" >
  <div class ="link"><a href = "#">link </a> </div>
</div>
  <div class="child"><img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg"  width="200" height="200">
  <div class ="link"><a href = "#">link </a> </div>
</div>
</div>

htmlcssflexbox

Answer №1

Check out this approach:

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #e2eaf4;
  padding: 10px;
          flex-direction: row;

}

.child {
  display: inline-block;
  font-family: "Open Sans", Arial;
  font-size: 20px;
  color: #FFF;
  text-align: center;
  background: #3794fe;
  border-radius: 6px;
  padding: 20px;
  
}

.child:first-child {
  width: 100%;
}
.child:nth-child(n+2){
  width: 49%;
  padding: 0px;
  margin: 0px;
  padding-top: 20px;
  margin-top: 12px;
}

.link {
background-color:white;
padding: 20px;
margin: 12px;
}

img {
  width: 100%;
  height: auto;
}
<div class="container">
  <div class="child">Child</div>
  <div class="child"><img src="https://custom-image-example.com/image.jpg" >
  <div class ="link"><a href = "#">link </a> </div>
</div>
  <div class="child"><img src="https://custom-image-example.com/image.jpg"  ">
  <div class ="link"><a href = "#">link </a> </div>
</div>
</div>

Answer №2

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; 
  background: #e2eaf4;
  padding: 5px;
  flex-direction: row;

}

.child {
  display: inline-block;
  font-family: "Open Sans", Arial;
  font-size: 20px;
  color: #FFF;
  text-align: center;
  background: #3794fe;
  border-radius: 0px;
  padding: 3px;

}

.child:first-child {
  width: 100%;
}
.child:nth-child(n+2){
  width: 49.9%;
  padding: 0px;
  margin: 0px;
  padding-top: 3px;
  margin-top: 3px;
}

.link {
background-color:white;
padding: 20px;
margin: 12px;
}

img {
  width: 100%;
  height: auto;
}
<div class="container">
  <div class="child">Child</div>
  <div class="child"><img src="https://uniquewebsite.com/image1.jpg" >
  <div class ="link"><a href = "#">link </a> </div>
</div>
  <div class="child"><img src="https://uniquewebsite.com/image2.jpg" ">
  <div class ="link"><a href = "#">link </a> </div>
</div>
</div>

Answer №3

If you want the image to completely fill the child element, ensure that its width is set to 100% and height is set to auto.

Check out the modified code:

.box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #e2eaf4;
  padding: 10px;
          flex-direction: row;

}

.item {
  display: inline-block;
  font-family: "Open Sans", Arial;
  font-size: 20px;
  color: #FFF;
  text-align: center;
  background: #3794fe;
  border-radius: 6px;
  padding: 20px;
  
}

.item:first-child {
  width: 100%;
}
.item:nth-child(n+2){
  width: 49%;
  padding: 0px;
  margin: 0px;
  padding-top: 20px;
  margin-top: 12px;
}

.link {
background-color:white;
padding: 20px;
margin: 12px;
}
.box .item img {
  width: 100%;
  height: auto;
  }
<div class="container">
  <div class="item">Child</div>
  <div class="item"><img src="https://example.com/image.jpg"width="200" height="200" >
  <div class ="link"><a href = "#">link </a> </div>
</div>
  <div class="item"><img src="https://example.com/image.jpg"  width="200" height="200">
  <div class ="link"><a href = "#">link </a> </div>
</div>
</div>

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

Issue with word-wrapping in a CSS Grid element

My paragraph text lacks line breaks and needs to wrap onto a new line when the width exceeds that of the grid container. It works fine without using a grid. I attempted the method suggested in Prevent content from expanding grid items but had no luck. Ano ...

htmlcsscss-grid

Is it feasible to automatically uncheck all the other checkboxes when one checkbox is checked in HTML?

Currently, I am in the process of constructing a gallery using pure CSS. When I select image1, checkbox1 will be checked and div1 will become visible. This functionality has already been implemented successfully. However, an issue arises when I click on im ...

htmlcss

What is the best way to style the header of a table when scrolling in CSS?

Currently, I am facing an issue with applying the top CSS property to the thead element of a table while scrolling. I have attempted various methods but have been unsuccessful in achieving the desired outcome. Initially, I used the scroll event, however, ...

javascriptjqueryhtmlcss

Submit information from an HTML form to a PHP script and then send the response back to the client using AJAX,

Looking to run a PHP script using AJAX or JavaScript from an HTML form and then receive the results on the HTML page. This is what my changepsw.php file looks like: <?php // PHP script for changing a password via the API. $system = $_POST['syst ...

javascriptphpjqueryhtmlajax

Content within Drawer featuring Material UI Scrollable Tabs

I am currently utilizing a material-ui drawer with the mini variant drawer structure. Inside this drawer, I have incorporated a series of tabs utilizing the prevent scroll buttons tabs design. The version of material-ui being used is 4.12.3. Regrettably, ...

javascriptcssreactjsmaterial-ui

I am a newcomer to HTML and I am eager to display the selected options from a <select> element

Can someone help me display the selected licorice flavor, chocolate color, and topping? For example: "Green apple, white, christmas sprinkles." I'm not sure if assigning a numeric value to each option is necessary. I did it on a whim. Please suggest ...

javascripthtmlselect

Why does this element on Safari have a focus outline appearing even before it is clicked?

The issue is occurring specifically in Safari, and you can see it firsthand by clicking the "chat now" button located in the lower right corner of the screen: Upon clicking the "chat now" button, the chat window's minimize button displays a focus out ...

csssafarifocusaccessibility

dormant HTML toggle for guests

I am looking to include an HTML switch on my webpage, but with a twist - I want to be the only one able to change its status while visitors can only view it. This is what I currently have: .onoffswitch { position: relative; width: 122px; -webkit- ...

htmlcssswitch-statement

What is the process for modifying CSS in Laravel?

New to Laravel over here, currently working in Homestead. When I need to make changes to my CSS, I typically edit the app.scss file located in resources/assets/sass and then recompile the css with Mix using the command npm run dev. I'm not entirely ...

phpcsslaravellaravel-blade

What is the best way to add a -webkit-transform to a div without affecting its enclosed elements?

Is there a way to apply a webkit transformation to a div without affecting the text inside? I need help with achieving this. Below is my current code: .main_div { width:200px; height:100px; background:red; margin-left:55p ...

htmlcss

How to overlay an image on a div element using Bootstrap styling

My goal is to have an image positioned between two separate div tags similar to a Facebook profile page: https://i.sstatic.net/sBocE.jpg I have tried solutions found here but they didn't work as expected. The image position changes when the screen s ...

htmltwitter-bootstrapimagecsspositioning

Exploding particles on the HTML5 canvas

I've been working on a particle explosion effect, and while it's functional, I'm encountering some issues with rendering frames. When I trigger multiple explosions rapidly by clicking repeatedly, the animation starts to lag or stutter. Could ...

javascripthtmlcanvas

PHPDocumentator mistakenly generated .cs files instead of .css files

After installing PHPDocumentator, I encountered a minor issue. It seems to be generating CSS files with the extension ".cs" instead of ".css". This discrepancy is causing problems since the HTML files reference these stylesheets as "style.css", "print.css" ...

cssphpdoc

Creating custom outlines for CSS shapes

Exploring the world of CSS shapes has left me wondering - is it possible to give them solid, dotted, or dashed borders? I came across some examples of shapes that caught my eye (shapes), but making them stand out with different border styles posed a challe ...

javascriptjqueryhtmlcss

Dealing with text overflow within a column and ensuring that the text always expands horizontally to align with the column width

I have implemented a file input feature that displays the selected file's name in a column. However, when the file name is too long, it expands vertically which causes readability issues. There is an option to force the text to expand horizontally, b ...

htmlcssangulartypescriptoverflow

TradingView widget chart embedded within a web page is failing to display when hosted on X

I am having trouble displaying a TradingView widget. When I embed the widget in an HTML file and open it in a regular browser, the chart shows up fine. However, when I embed the widget in a PHP or HTML file and try to open it using xampp, the browser doesn ...

phphtmlxampp

Tips for organizing labels and user input within an HTML document

I attempted to align inputs and labels horizontally. Here is what I tried: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="span2"> <h2& ...

htmlcsstwitter-bootstrap

How can I reduce the size of a Bootstrap 5 carousel that spans the entire screen?

As someone new to web development, I have found using bootstrap to be extremely helpful. However, I am currently struggling with creating a carousel for my website. My goal is to display some pictures in one corner of the page, but the carousel keeps str ...

htmlcssbootstrap-5

The navigation bar and column layout is not functioning properly in Firefox

Hey there! I'm having a little issue with my website. When I view it in Chrome, everything looks perfect - the logo is left aligned at the top right and the testimonials section at the bottom has a nice 3 column layout. But when I try to open it in Fi ...

htmlcssfirefoxtwitter-bootstrap

Best Way to Enable Push Notifications on Phonegap for iPhone - Top Suggestion

Looking for advice on the most cost-effective way to add push notifications to an HTML5 Phonegap app. I'm a front-end developer with limited xcode knowledge, so I'm considering using a service like Urban Airship. Any recommendations or tips on im ...

jqueryioshtmlcordovapush-notification