Putting Images Next to Each Other - Arranging Them to Be Responsive

I have a pair of images on my webpage that I've aligned next to each other. To enhance the mobile user experience, I want these two images to stack on top of each other when viewed on smaller screens.

If anyone can provide guidance on creating responsive images for easier viewing on small devices and help with managing image spacing, I would greatly appreciate it.

![Here's how I envision the layout on smaller devices][1]

My (updated) code looks like this:
    
   <!DOCTYPE html>
<html lang="en; jp;">     
    
<body style="background-color: white;">
      
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
      
<div class="page-wrap">
     
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
        
<header class="cp_offcm03">
        
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
            
<li style="border-bottom: .05px solid lightgray;"><a href="#">Home</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">Blog</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">About Koizumi</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">References</a></li>
    
            
<div class="searchbar"> 
            
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 20px; padding-top: 20px; text-align: right; position: inline;"/>
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;"/>
<input class="search1" type="submit" name="submition" value="Search" style=" padding-  
bottom:20px; left: 0px; top: 153px; height: 25px; width: 32px;"/>
<input class="search2" type="hidden" name="sitesearch" value="default.html"/>    
    
    
<script type="text/javascript">
 document.getElementById('frmSearch').onsubmit = function() {
 window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
        return false;
    }
    
 document.getElementById('cp_toggle03').onchange = function() {
 if (document.getElementById('cp_toggle03').checked) {
 document.body.style.overflow = "hidden";
  } else {
 document.body.style.overflow = "";
  }
}    
    
</script>
         
</div> 
</ul>    
</nav>
</header>     
               
<div class="setsumei">
        
</div>
        
<br><div class="image" style="margin: 10px; text-align: center;">
    
<div class="responsive-image-container">   
<a href="#"><img src="photos/Home_Page/fuji.JPG" alt="Fuji" width="40%"></a>&nbsp;<a href="#"><img src="photos/Home_Page/Kongoji_homepage.jpg" alt="Kongoji" width="40%"></a>
</div>
    
<br><br><footer class="site-footer" style="font-size: 12px;">小泉© 2020 | <a href="#">English</a></footer>
      
</div>
      
<style>
    
 .searchbar{float: right;}  
    

 
@media only screen and (max-width: 1050px){
    .responsive-image-container{
    display: flex;
    flex-direction: column;
  }
}
    
 .setsumei{margin-left: 20px;
           margin-right: 20px;}
    
 .footer{width: 100%; 
           height: 40px; 
           text-align: center;
           border-top: 1px solid black; 
           position: absolute;
           bottom: 0;
           padding: 10px;}
    
 .page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -40px; 
}

 .page-wrap:after {
  content: "";
  display: block; 
  }

 .site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 40px; 
}

 .site-footer {
  text-align: center;
  border-top: 1px solid black;
  padding: 10px;
}
        

 *, *:before, *:after {
    padding-left: 0;
    margin: 0;
    box-sizing: border-box;
    
}    

 ol, ul {
    list-style: none;
}

 a {
    text-decoration: none;
    color: black;
}
    
 .cp_cont {
    height: auto;
}
    
/* menu */
 .cp_offcm03 {
    position: relative;
    z-index: 5000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    width: 100%;
    height: auto;
    padding-top: 0;
    -webkit-transition: transform 0.3s ease-in;
            transition: transform 0.3s ease-in;
    text-align: center;
    color: black;
    background-color: white;
}
 .cp_offcm03 nav,
 .cp_offcm03 ul {
    height: 100%;
}

 .cp_offcm03 li {
    display: inline-block;
    margin-right: -6px;
}

 .cp_offcm03 a {
    display: block;    
    padding: 15px 45px;
    margin-bottom: -5px;
    -webkit-transition: background-color .3s ease-in;
            transition: background-color .3s ease-in;
}
    
 .cp_offcm03 a:hover {
    background-color: lightgray;
}

/* menu toggle */
 #cp_toggle03 {
    display: none;
}

 #cp_toggle03:checked ~ .cp_offcm03 {
    -webkit-transform: translateX(0);
                    transform: translateX(0);
}

 #cp_toggle03:checked ~ .cp_container {
    -webkit-transform: translateX(0);
                    transform: translateX(0);
}

 .cp_mobilebar {
    display: none;
    
}

/* content */
 .cp_container {
    position: relative;
    top: 0;
    padding: 35px auto;
    -webkit-transition: transform .3s ease-in;
            transition: transform .3s ease-in;
}   

 .cp_content {
    margin: 0 auto;
    padding: 20px;
    height: 65vh;
    text-align: center;

}

@media (max-width: 1050px) and (min-width: 480px) {
/* menu */
 .cp_offcm03 {
        position: fixed;
        left: -250px;
        overflow-y: hidden;
        width: 250px;
        height: 100%;
        padding-top: 40px;
        color: black;
        background-color: white;
        z-index: 1000;
    }
    
    
 .cp_offcm03 nav {
        background: white;
        border-right: 0.5px solid lightgray;
        margin-left: -210px;
    }
    
    
    
 .cp_offcm03 li {
        display: block;
        margin-right: 0;}

        
        
 .cp_offcm03 a {
        padding: 20px;
        
    }
    
/* menu toggle */
 .cp_mobilebar {
        display: block;
        z-index: 2000;
        position: relative;
        top: 0;
        left: 0;
        padding: 0 25px;
        width: 100%;
        height: 40px;
        background-color: white;
        border-bottom: .05px solid lightgray;
        
        
    }
    
 .cp_menuicon {
        display: block;
        position: relative;
        width: 25px;
        height: 100%;
        cursor: pointer;
        -webkit-transition: transform .3s ease-in;
                transition: transform .3s ease-in;
    }
 .cp_menuicon > span {
        display: block;
        position: absolute;
        top: 55%;
        margin-top: -0.3em;
        width: 100%;
        height: 0.2em;
        border-radius: 1px;
        background-color: black;
        -webkit-transition: transform .3s ease;
                transition: transform .3s ease;
    }
 .cp_menuicon > span:before,
 .cp_menuicon > span:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 1px;
        background-color: black;
        -webkit-transition: transform .3s ease-in;
                transition: transform .3s ease-in;
    }
    
 .cp_menuicon > span:before {
        -webkit-transform: translateY(-0.6em);
                transform: translateY(-0.6em);
    }
 
 .cp_menuicon > span:after {
        -webkit-transform: translateY(0.6em);
                transform: translateY(0.6em);
    }

 #cp_toggle03:checked + .cp_mobilebar .cp_menuicon { 
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
    }
    
 #cp_toggle03:checked + .cp_mobilebar span:before,
 #cp_toggle03:checked + .cp_mobilebar span:after {
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
    }
    
 #cp_toggle03:checked ~ .cp_offcm03 {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
    }
    
 #cp_toggle03:checked ~ .cp_container {
        -webkit-transform: translateX(250px);
                transform: translateX(250px);
    }
    
 input:checked ~ #h-menu_black {
    display: block;/*Cover overlay*/
    opacity: .6;
}
    
 #h-menu_black {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .7s ease-in-out;
}
    
/* content */
 .cp_container {
        top: 60px;
        height: 92vh;
        text-align: center; 
    } 
    
 .noscroll{
        overflow: hidden;
        position: fixed;
    }
    
</style> 
      
</body>
</html>




  [1]: https://i.sstatic.net/HkD6k.jpg
htmlcssresponsivephoto

Answer №1

When it comes to images, they are considered inline elements in HTML. The layout of your website will determine how you want to handle them. Sometimes, all you need to do is ensure the image size is correct and set a maximum size.

Here's a simple implementation:

.responsive-image-container {
  text-align: center;
}

.responsive-image-container>img {
  max-width: 100%;
  margin: 8px;
}
<div class="responsive-image-container">
  <img src="https://placeimg.com/300/200/any" alt="some image" />
  <img src="https://placeimg.com/300/200/any" alt="some image" />
</div>

If you want more control over your images, such as having them fill their parent container, using flexbox can help. Here's an example:

.responsive-image-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

@media only screen and (min-width: 960px) {
  .responsive-image-container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
  }
}
<div class="responsive-image-container">
  <img src="https://placeimg.com/300/200/any" alt="some image" />
  <img src="https://placeimg.com/300/200/any" alt="some image" />
</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

"putting into a state of freezing" an entry field

My <input type="text" /> element needs to stop accepting text at a certain point. However, I'm unable to change the type to type="button" for some reason. What is the best way to make my <input> element stop accepting text? ...

jqueryhtmljquery-ui

Create a custom CSS style to replace the default jQuery hide() function

HTML <div class="adm-input" <?php if(!empty($admin_fee) || $admin_fee != "") echo "style='display:block'"; ?> id="fees-input"> <label>Admission Fees(<i class="fa fa-inr"></i>)</label> <div class="in ...

javascriptjqueryhtmlcss

What is the process for uploading the product information to the database during checkout?

Everything on my e-commerce website is functioning perfectly, except for the checkout page. After the customer fills in the bill details, they should be able to place an order. The issue I am facing is that while I am able to retrieve and store the bill d ...

phpjqueryhtml

When HTML elements are unable to access functions defined in separate JS files

After successfully resolving the issue, I am still curious as to why the initial and second attempts did not work: The problem lay with an HTML element connected to an event (myFunction()): echo '<button class="btn remove-btn" onclick="myFunction( ...

javascripthtml

Search for and swap out a parameter value within an array located in a div using jQuery

A query I have is regarding a div where I am aiming to update the value of a parameter within an array. The PHP code I am using to create the HTML is as follows: <div id="data1<?php echo $data['id']; ?>" data-url="<?php echo 'p ...

jqueryhtml

What is the best way to overlay several hidden links on a single image using HTML?

Currently working on a project using Flask and I am interested in creating an interactive image where clicking on different sections will navigate to unique links. Is this achievable? Any guidance or resources on how to implement this feature would be mu ...

htmlimagelayoutclick

Is it possible to modify CSS properties using Ajax?

I am attempting to dynamically change the background color of a div using AJAX to fetch the user's specified color from the database. Below is the code snippet I am using: $.ajax({type: "POST", data: {id: id}, url: "actions/css.php", success: functio ...

javascriptjquerycssajaxjson

Navigating through nested arrays in Laravel Blade templates

I have an array that is displaying the code below after being dumped. array:1[ "123"=>array:3[ "test1" => 12345 "test2" => "test" "test3" => 123 ] ] When trying to display each element in an HTML table, the val ...

phphtmllaravel

What is the best way to add an active class to a clicked menu item that already has a class

I have menu items on the master page, and if users click on that menu item, I want to show it as active. My goal is to append "Active" to the existing class to indicate that it is active. _Layout.cshtml: <div class="menu-items-navigation"> <di ...

c#cssasp.netasp.net-mvc

Here's how you can combine two individual LESS files using grunt-recess

Hey there! I'm working on compiling 2 separate files using grunt recess: recess: { dist: { options: { compile: true }, files: { 'path/css/custom. ...

csslessgruntjsrecesstwitter-recess

Update the JavaScript and CSS files following an AJAX request with $.get

I am encountering an issue where my global CSS and JS files contain all the necessary definitions, but when I load new HTML blocks via AJAX $.get, these new elements do not receive the correct CSS/JS definitions. Is there a convenient way to refresh the ...

javascriptjquerycssajax

Having trouble implementing a circular progress bar with a custom Tailwind CSS library, the desired effect is not being achieved

I am on a mission to create a circular progress indicator. Recently, I stumbled upon the daisyui library and its component called radial progress - The documentation mentions that: "Radial progress requires the use of the --value CSS variable." ...

cssreactjstailwind-css

How can I adjust the alignment of my menu items to be centered without using flexbox?

Even though I've searched extensively on how to center text horizontally, none of the suggestions have worked for me. I attempted using margin-left: auto, margin-right: auto, and text-align: center for the class nav-center, but none of them had the de ...

htmlcss

The Conflict-Free Dilemma of JQuery Cycle

Everything was working smoothly with the implementation of the JQuery Cycle Plugin. However, as I attempted to link a separate JavaScript file for a Menu in the Head Section from this source , <script type="text/javascript" src="js/ddmegamenu.js"> ...

jquerycss

What is the best way to continuously run a series of functions in a loop to create a vertical news ticker effect?

I'm in the process of creating a vertical latest news ticker, and although I'm new to javascript, I'm eager to learn and build it myself. So far, I've come up with this, but I want the news cycle to restart once it reaches the end. ...

javascripthtmlcssloops

Transitioning to the Full Website with PHP Sessions - Discrepancies in Styling

I've encountered an issue when trying to switch from a mobile site to a full site using sessions. The styles on the full site do not load unless I refresh the page, at which point they finally appear. On my mobile page, there's a link that direct ...

phphtml

Designing a structure with a stationary header, immobile sidebar navigation, and unchanging content using flexbox styling

In the development of a web application, I am utilizing FlexBox for layout design. It is important to note that I am opting for pure flexbox CSS rather than incorporating Bootstrap. Desired Layout Structure: Row1: Consists of a fixed header 64px in heigh ...

javascripthtmlcssflexbox

<ul> hover effect and text </ul>

Looking for a solution to activate hover state on both the box and text when rolling over tiled images with text underneath. Check out this example in the Fiddle: http://jsfiddle.net/techydude/GF8tS/ Any suggestions on how I can achieve this effect? ...

cssrollover

Tips for maintaining tab state using Angular Material

In my Angular 8 application with Angular Material, I have implemented four tabs where each tab allows editing. However, when going back from the edit mode to the tabs, I want the last selected tab to remain selected. My approach so far is as follows: exp ...

htmlangulartypescripttabsangular-material

Prevent a div from scrolling once it reaches the end of its content, while allowing the other div to continue

I am trying to make the col-md-4 column stop scrolling once it reaches the end of the content, similar to the right sidebar on Facebook. I have attempted using jQuery to add a fixed position when it reaches the bottom, but it is not working as expected. Th ...

htmlcsstwitter-bootstrap