pictures arranged in a single column on compact screens

Our current code is being used to display 4 images, but it lacks responsiveness compared to this link. Specifically, the middle 2 images in the second row are stacked vertically on smaller screens.

If you need the code snippet: Jsfiddle

We have a similar code implementation on this website which appears to be responsive.

.top-designs1 > h1, .mens-block > h1, .womens-collection > h1, .fan-book > h1 {color: #000;padding-top: 5px;text-align: center;}
 .tow-grid1 .left {float: left;width: 50%;}
 .tow-grid1 .right {float: right;width: 50%;}
 .full-grid1 {margin-bottom: 10px;}
<div class="top-designs1">
<div class="tow-grid1">

<div class="full-grid1">
<img src="http://sbdev2.kidsdial.com:81/media/wysiwyg/a1.jpg" width="1000px" />
</div>

<div style="clear: both; margin-bottom: -10px;">&nbsp;
</div>

<div class="left">
<img src="http://sbdev2.kidsdial.com:81/media/wysiwyg/a2.jpg"}}" width="495px" />
</div>

<div class="right">
<img src="http://sbdev2.kidsdial.com:81/media/wysiwyg/a3.jpg"}}" width="495px" />
</div>


<div style="clear: both; margin-bottom: -10px;">&nbsp;
</div>


<div class="full-grid1">
<img src="http://sbdev2.kidsdial.com:81/media/wysiwyg/a4.jpg" width="1000px" />
</div>

</div>
</div>

htmlcssresponsive-design

Answer №1

It seems like there are multiple elements clashing in your layout. I'm not sure if you're using a grid system or if you created it yourself, but here's a cleaner example using flexbox for reference (I think it looks much neater than what you currently have).

<div class="grid">
  <div class="item">
     <img src="http://placehold.it/350x300">
  </div>
  <div class="item">
    <img src="http://placehold.it/350x300">
  </div>
</div>

.grid {
  display: flex;
  height: 300px;
  flex-wrap: wrap;
  max-width: 1024px;
}

.item {
  flex-basis: 50%;
  height: 300px;
  min-width: 350px;
}

You can check out the code here.

Feel free to resize the window to see the content wrapping properly.

If you have any questions, don't hesitate to reach out!

Answer №2

If you're looking to ensure your images are responsive, give this code snippet a try:

.featured-image img { width:100%; display:block; }

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

What could be causing my jQuery function to not correctly update the class as specified?

Presented is a snippet of script that I execute at a specific moment by echoing it in PHP: echo "<script>$('.incorrect-guesses div:nth-child(2)').removeClass('empty-guess').addClass('incorrect-guess').text('2' ...

phpjavascriptjqueryhtmlcss

The text appears in the header instead of a separate section in Bootstrap 4

I am facing an issue with my one-page website where the new text section appears in the header video instead of after it. Can someone point out what I might be doing wrong? Here is my HTML: <header> <div class="container"> <div class="bg ...

htmlcsstwitter-bootstrapbootstrap-4

Eliminate the table background effect on hover using HTML and CSS

If you need assistance with a contact form, please visit this link. There seems to be an issue with the hover effect on the fields causing them to turn dark grey. This may not align with your desired plain white background. You can view a screenshot https ...

htmlcss

The battle of CSS3 Media Types: targeting all devices versus the undefined

What sets apart these two media queries: @media all and (min-width: 480px) { ... } and @media (min-width: 480px) { ... } ...

cssmedia-type

How can I locate and modify particular element attributes within PHP files in a WordPress template?

Hello everyone, I am relatively new to the world of Wordpress and have recently taken over a project from another developer. The previous developer left behind default placeholders and texts that need to be updated. One specific change I need to make is to ...

phphtmlwordpress

Adjusting the size of content tags depending on their popularity

Currently, I am working on setting up a basic tagging system by following the database structure provided in this Stack Overflow post. My goal is to create a single page that showcases all the tags, with each tag being visually scaled based on its popular ...

javascriptjquerycsstwitter-bootstraptagging

Troubleshoot mobile overflow-x problem when expanding div beyond container boundaries

Recently, I experimented with a method to extend the background-color of my div outside its container. Everything was working fine except for the fact that applying overflow-x to the body on mobile browsers didn't completely disable horizontal scrolli ...

htmlcssmobileresponsive-design

C++ efficiently sending image data as response via FastCGI

I am currently working on an application that requires the ability to send images as a response. I am facing some challenges in getting this functionality to work correctly. After making a simple get request, I attempted to create a response message string ...

htmlc++imagecgi

Discover the best practices for integrating media queries using Radium within Material UI components

Having trouble applying a breakpoint to the Material UI component, Raised button. I have managed to make it work for regular divs, but not for the Material UI component. I attempted wrapping the button inside Radium import RaisedButton from 'materia ...

cssreactjsmaterial-uiradium

The image sequence animation only loads once and does not continue indefinitely

Here is my code snippet: I have a sequence of 15 images that should load one after the other in a loop with a specific time interval. However, I am facing a bug where the images keep playing infinitely when the page loads, but I want them to play only once ...

javascripthtmlcss

Combining multiple images into one CSS image sprite to create 4 clickable

Could someone please review this segment of the CSS to ensure its accuracy? CSS #nav-list { list-style-type: none; background-repeat: no-repeat; background-image:url("../_img/Footersprite.png") } #nav-list li, #nav-footer a { height: 40 ...

htmlcss

Aligning forms horizontally using Bootstrap

Has anyone experienced a strange alignment issue with Bootstrap while trying to horizontally align textboxes with a select control? https://i.stack.imgur.com/1tw4P.png <div class="row"> <div class="form-group"> <div cla ...

htmltwitter-bootstrap-3

Aligning a large checkbox to the left in Bootstrap 4 styling

Bootstrap 4. <div class="form-group"> <label asp-for="Enabled" class="control-label"></label> <input asp-for="Enabled" class="form-control" type="checkbox" /> <span asp-validation-for="Enabled" class="text-danger"> ...

cssbootstrap-4

Setting the height property for the second level list items within a nested unordered

I am having trouble setting the height for the Games menu like all the other menus. Can someone help me figure out what is wrong? Here is the code I have: <ul class="menu"> <li class="item-474 current active"><a href="/">News</a&g ...

csshtml-lists

Tips for preventing line breaks within table cells

Looking at the image below, I need to display the Hallticket in a single line. The first one is retrieved directly from the database, while the second one is added dynamically using JavaScript. How can I show both sets of data in a single line? https://i. ...

javascriptphpjqueryhtmlcss

Modifying Names and Job Titles to Appear Beneath Images in HTML and CSS

Is there a way to update names and job titles directly below the images? To find out more, click on this link ...

htmlcss

Can a Unicode character be overwritten using a specific method?

Is there a way to display a number on top of the unicode character '♤' without using images? I have over 200 ♤ symbols each with a unique number, and using images would take up too much space. The characters will need to be different sizes, a ...

javascripthtmlcss

Adjusting the background color of the custom input range thumb when the input is disabled

I've customized the input thumb on my range slider, and I'm looking to change its color when it's disabled. I attempted adding a class to the thumb like this: input[type=range]::-webkit-slider-thumb.disabled and also tried adding the disa ...

cssangulartypescript

Excessive padding on labels and insufficient padding on input fields in Bootstrap 4 mobile view

Having a simple password field using Bootstrap grid classes: <div class="container"> <div class="row"> <label class="col-sm-2" for="passwordField">Password</label> <input class=&q ...

htmlcssbootstrap-4

Using Tailwind CSS's width property w-11/12 actually returns a full 100% width instead of the expected 91.66

It seems that the w-11/12 class is not behaving as expected. According to the documentation, it should give a width of 91.666% but instead, it's filling up 100%. This issue only occurs with the value 11, while other values work fine. Has anyone else e ...

cssreactjstailwind-css