Modify the positioning of images in HTML based on window resizing

Trying to solve this problem seems more complicated than it actually is.

I have 6 Images, each accompanied by a button below. Here's an example of what I'm working with: https://i.sstatic.net/sYCgC.png

The way I currently have them set up is like this:

<img src="Image.png" width="350" height="208" style="margin: 0px 16px">
<img src="Image.png" width="350" height="208" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">

Initially, everything looks fine on a regular browser window. However, when I resize the window, it ends up looking like this: https://i.sstatic.net/nzmkW.png

This distortion is due to how I have structured my images and buttons.

What I want to achieve is for them to appear like this when the window is resized: https://i.sstatic.net/KJW28.png

Is there a way to modify my basic HTML code so that the layout remains consistent regardless of the window width?

My goal is to transition from a maximum 2 by x grid to a minimum 1 by x grid as shown in the initial and final images.

Any guidance you can provide would be greatly appreciated.

I did come across a solution on Stackoverflow HERE, but it only works with squares which isn't applicable in my case.

I'm eagerly awaiting your assistance! :D

UPDATE

You can view the current state here: https://jsfiddle.net/du6Lu4ge/

Initial appearance: https://i.sstatic.net/PRbPN.png

Resized view: https://i.sstatic.net/iKy3k.png

:(

csshtmlimage

Answer №1

This is how I would approach it:

https://jsfiddle.net/abc123def/5/

I hope this solution works for you!

My method involved enclosing the image and button within a div called .img-wrapper with styling set to display: inline-block

Answer №2

This demonstration showcases a fully responsive design that can be easily customized by adjusting the CSS and incorporating viewports.

HTML:

<div class="imageContainer">
  <div class="imageBlock">
    <!--<img class="image" src="image.png">-->
    <div class="image">
       Your Image
    </div>
  </div>
  <div class="buttonBlock">
    <!--<img class="button" srck="button.png">-->
    <div class="button">
       Your Button
    </div>
  </div>
</div>
<div class="imageContainer">
  <div class="imageBlock">
    <!--<img class="image" src="image.png">-->
    <div class="image">
       Your Image
    </div>
  </div>
  <div class="buttonBlock">
    <!--<img class="button" srck="button.png">-->
    <div class="button">
       Your Button
    </div>
  </div>
</div>
<div class="imageContainer">
  <div class="imageBlock">
    <!--<img class="image" src="image.png">-->
    <div class="image">
       Your Image
    </div>
  </div>
  <div class="buttonBlock">
    <!--<img class="button" srck="button.png">-->
    <div class="button">
       Your Button
    </div>
  </div>
</div>
<div class="imageContainer">
  <div class="imageBlock">
    <!--<img class="image" src="image.png">-->
    <div class="image">
       Your Image 
    </div>
  </div>
  <div class="buttonBlock">
    <!--<img class="button" srck="button.png">-->
    <div class="button">
       Your Button
    </div>
  </div>
</div>

CSS:

.imageContainer {
  width: 400px;
  display: inline-block; 
}

.imageContainer .imageBlock {
   display: inline-block;    
}

.imageContainer .imageBlock .image {
  display: inline-block;
  width: 400px;
  height: 300px;
  background-color: darkred;  
}

.imageContainer .buttonBlock {
  display: inline-block;
  text-align: center;
}

.imageContainer .buttonBlock .button {
  display: inline-block;
  width: 300px;
  margin: 10px 50px; /* simple way to center it */
  height: 100px;
  background-color: cyan;
}

You can experiment with this layout on https://jsfiddle.net/q10fbesm/

Edit: To create a two-line grid, wrap the HTML in a container and style it using max-width: 801px.

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

Why does using rgba color with an alpha value cause my div to become see-through?

I am currently attempting to assign a background color to a specific style of pop-up, but whenever I use a value that includes an alpha channel, it ends up being transparent. This is the CSS code I have been using: --color: 255, 144, 106, 0.18; background ...

javascriptcss

What is the best way to add animation to the hide/show function?

<div class="overlay"></div> CSS: .overlay::after { position: fixed; top: 0; left: 0; width: 100%; content: ""; z-index: -1; height: 100%; transit ...

htmlcss

Intersecting Hyperlink Elements Creating a Hover Effect

I've encountered a perplexing CSS display issue and I'm at a loss for alternative solutions besides simply widening the width of the parent div. Allow me to explain the layout: <div> <ul> <li> <a href="javascrip ...

css

What is the best way to extract data from nested tables using Python?

My goal is to extract information from radiofeeds in order to create a comprehensive list of all UK radio stations. Station Name Geographical Location Stream URLs Athavan Radio Greater London { 64: "http://38.96.148.140:6150/listen.pls?sid=1&q ...

pythonhtmlweb-scrapingbeautifulsoup

Add JSON data to HTML divs containing relevant details

I'm currently working on parsing through a JSON file and dynamically adding the information to the appropriate containers. This process involves two levels: the first level and the second level. The first level consists of different handle types (Vict ...

javascriptjqueryhtmljson

Why won't my Twitter Bootstrap navigation bar apply the styles?

I am currently working on a Rails app (4.0) and have incorporated Bootstrap 3 into my project. Both bootstrap.css and bootstrap-theme.css are stored in the stylesheets directory, while bootstrap.js is located in the javascripts directory. Most of the Boots ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Step-by-step guide for adding an icon to the corner of a Material UI button

Is there a way to position an icon in the corner of a Material UI button in React? Currently, I have the icon next to the title but I would like to move it to the lower right corner of the button. Any suggestions on how to achieve this? Thank you! export ...

javascripthtmlcssreactjsmaterial-ui

Updating Angular model remotely without relying solely on the controller

I am struggling to call the addRectangleMethod method from my Javascript code in order to retrieve server-side information into the Angular datamodel. However, I keep encountering an error stating that the method I'm trying to call is undefined. It&ap ...

javascripthtmlangularjstypescript

Effective method for centering a navigation bar vertically within a section element without relying on absolute positioning

Let's explore a unique way to vertically center content within a div while steering away from fixed values. Interestingly, the typical solutions don't always work as expected in a section environment. The challenge now is: How can we center the ...

htmlcss

Ensure that only numerical values in decimal form are permitted when entering data in Angular

How can I restrict user input to only decimal values? Here is the HTML code for my input field: <label for="conversion-factor">Conversion Factor:</label> <input type="text" class="form-control form-control-sm" id="conversion-factor" ...

javascripthtmlangulartypescript

In order to position an inner div in the center and have it expand equally at the top and bottom according to the content size

I am currently working on a layout that involves an inner div with a text div. My goal is to center the inner text div vertically and increase the size of the text div equally from both the top and bottom based on the content size. Below is the approach ...

htmlcss

Tips for getting jquery toggle to function properly

I am struggling with a simple task involving two divs: <div id="slide_menu"> <div id="tic">MENU</div> </div> My goal is to make div#slide_menu toggle up and down when div#tic is clicked. I have attempted to use slideUp, slideDown, ...

jqueryhtmlclicktoggleslide

Eliminate the empty gap preceding the slideshow

I have a slideshow and aside content in HTML. My goal is to eliminate the space below the slideshow so that the aside content can be positioned right next to the end of the slideshow. Unfortunately, I am unsure how to remove this space without disrupting ...

jqueryhtmlcsswebslideshow

Having difficulty sending a value with %45 to a REST API

Currently, I'm encountering an issue within my ASP.NET MVC 5 application. The problem arises when I send the following JSON data to a third-party API, which includes a password field: "{\"operation\":{\"Details\":{\"RESOURCE ...

c#htmlasp.netjsonjson.net

What is the method to add gutters in Material UI grid without including margins?

I've been struggling for ages to make my responsive layout work properly! Whenever I add spacing to the Grid container with class=spotlight, things get misaligned. How can I add spacing to the gutters (the space between Grid items within the spotlight ...

cssreactjsmaterial-ui

External Submit button malfunctioning when attempting to submit two distinct forms

I'm currently working on a program to add items to the cart, and I need to include product attributes like colors and sizes in the process. However, I seem to be encountering an issue where only one form is submitted when using jQuery's submit(), ...

javascriptphpjqueryhtmlforms

"Add a new style sheet to the homepage of your WordPress site using the

I have been attempting to utilize a separate style sheet in order to customize the front page of my wordpress website. Despite several attempts, I have not had any success. Below is the current code that I am working with: add_action('wp_enqueue_styl ...

phpcsswordpress

"Create a button in JavaScript that allows users to easily download a MySQL table

The website has been developed using node js/express, but there is a challenge in generating an URL to download the data from mysql table into a csv file. Is it feasible to accomplish this without relying on php? desirable outcome: "Download Data" "a sp ...

javascripthtmlmysqlnode.jsexpress

Generating a list item element based on the input value

How can we generate a list of li elements based on the value entered in an input field with type "number"? For example, if someone enters a number representing the count of persons, we want to dynamically create that many li elements. ...

javascriptjqueryhtmlcss

What is the best way to create a recurring design in a CSS grid?

Looking to create a unique CSS grid layout with a specific pattern: Display 4 elements in a row, then display 2 in a row, followed by 12 (as 4 in a row), and finally 2 more elements in a row. After that, the whole pattern repeats. Here is an image of the ...

csscss-grid