Having the ability for two images to adjust in size, becoming smaller or larger, as the page is resized and displayed

On my webpage, I have two divs positioned side by side with images inside them. Everything looks perfect when viewed on my Macbook 13 inch screen, but as I resize the browser window, the photos start to spread apart and create a large gap between them.

Is there a way to keep both photos aligned side by side even when the browser page width changes?

.pic {
  max-width: 100%;
}

#pic2 {
  max-width: 100%;
}

.photosection {
  background-color: black;
  max-width:1400;
  height:363px;
}

#photosection1 {
  float:left;
  max-width: 110vw;
}

#photosection2 {
  max-width:50%;
  float:right;
}
<div class="photosection">
  <div id="photosection1">
    <a  href="#" class="">
      <span class="text">
        Treat Yourself
        Intuitive Language Coaching
        (Intuitive Life-Coaching + Communication Training)
      </span>
      <img class="pic" src="images/oneonone.jpg" alt="inspiremug">
    </a> 
  </div>

  <div id="photosection2">
    <a  href="" class="">
      <span class="text">
        Treat Your Group, Business or Organization
        I'll bring the sweets!
      </span>
      <img id="pic2" src="images/groupsession.jpg" alt="necklace">
    </a> 
  </div>
</div>

htmlcssresponsive-design

Answer №1

#sectionPhoto1 {
    width: 50%;
    float: left
}

#sectionPhoto2 {
    width: 50%;
    float: right
}

Remember to specify width="100%" on your image tag

<img class="photo" src="pictures/cats.jpg" alt="cute kittens" width="100%">
<img id="photo2" src="pictures/dogs.jpg" alt="adorable puppies" width="100%">

Answer №2

To achieve the desired layout, you can set the display property of the divs to inline-block and adjust the image sizes using width: 100%.

.pic {
    width: 100%;
}

#pic2 {
    width: 100%;
}

.photosection {
    background-color: black;
    max-width: 1400;
    height: 363px;
}

#photosection1 {
    display: inline-block;
    float: left;
    max-width: 50%;
}

#photosection2 {
    display: inline-block;
    max-width: 50%;
    float: right;
}

Would you like further assistance with this?

Answer №3

Are you in search of this..?

.image {
  max-width: 100%;
}

#image2 {
  max-width: 100%;
}

.image-section {
  background-color: black;
  max-width:1400px;
  height:363px;
}

#image-section1 {
  float:left;
  max-width: 50%;
}

#image-section2 {
  max-width:50%;
  float:right;
}
<div class="image-section">

  <div id="image-section1">
    <a href="#" class="">
      <span class="text">
        Explore Your Potential
        Personalized Coaching Program
        (Personal Development + Skill Enhancement)
      </span>

      <img class="image" src="http://example.com/image1.jpg" alt="inspiremug">
    </a>
  </div>

  <div id="image-section2">
    <a href="#" class="">
      <span class="text">
        Treat Your Team, Company or Group
        Elevate Their Success!
      </span>

      <img id="image2" src="http://example.com/image2.jpg" alt="necklace">
    </a>
  </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

How do I input text into a Google Doc using an XPATH or element that is difficult to manipulate?

I'm currently working on a Python code that is designed to automatically open a Google Doc and input a specific set of combinations for a predetermined length. While I've successfully created the code to navigate to my Google Docs and open a new ...

pythonhtmlpython-3.xseleniumxpath

Adding a new column to a table that includes a span element within the td element

I am attempting to add a table column to a table row using the code below: var row2 = $("<tr class='header' />").attr("id", "SiteRow"); row2.append($("<td id='FirstRowSite'><span><img id='Plus' s ...

javascriptjqueryhtmlappend

Single input results in array output

I have a pair of items in this array list. $.each(data.recalls,function(i) { var recall = data.recalls[i].nnaId; var description = data.recalls[i].remedyDescription; console.log(recall); console.log(description); $('textarea[name= ...

javascripthtmlarrays

Here's a quick tip for adding a new line in your input message in Angular - just press Shift +

I need help with my chat box input field. I want it to be able to handle new line inputs similar to Facebook's chatbox. Here is a screenshot of My Chat Box: [1]: https://i.sstatic.net/NeG7d.png My HTML code for the input field: <form class=" ...

htmlangularinputtextchat

How come the hidden container does not reappear after I click on it?

I'm having an issue with a hidden container that holds comments. Inside the container, there is a <div> element with a <p> tag that says "Show all comments". When I click on this element, it successfully displays the comments. However, cli ...

javascriptjqueryhtmlcss

The printing function for the window system can cause disruptions to the layout of the table

After creating a page with a simple table that can be filled in and printed, I noticed some issues with the table formatting after printing. The intended table design was supposed to look like this: https://i.stack.imgur.com/aAk89.png However, upon print ...

javascripthtmljquerycss

Keeping the scroll in place on a Bootstrap4 modal while scrolling through content that is already at the top

On my Bootstrap 4 modal, I have encountered an issue with scrollable content. When I am at the top of the content and try to scroll downwards, nothing happens because I am already at the top. However, if I continue to hold the touch without releasing it, t ...

javascripthtmlcssbootstrap-4bootstrap-modal

Displaying incorrect results within the div container

I have been developing a website where a div element on a specific page displays values from a PHP file. Below is the PHP code responsible for rendering the information on the HTML: $output .= ' <div class="row text-left col-md-3 ...

phphtmlcss

How can I clear all jQuery toggled classes that have been added across the entire webpage in an Angular project?

Upon clicking a link within an element, the following CSS is applied: <a class="vehicleinfo avai-vehicle-info-anc-tag" ng-click="vehicleInfo($event)">Vehicle Info <span class="s-icon red-down-arrow"> </span> </a> $scope.vehic ...

javascriptjqueryhtmlcssangularjs

Having difficulty altering the div color in real-time using VueJS

I'm currently in the process of building an application with Bootstrap and VueJS. My goal is to create a folder structure similar to Google Drive, where I want to make a div stand out in blue once it's selected. Below is the code snippet: ex ...

javascriptjqueryhtmlcssvue.js

What's the reason the bootstrap tooltip style isn't displaying?

Seeking assistance with styling text in a bootstrap tooltip. My request is straightforward: I would like the text in the tooltip on the first button to be displayed in red color. I have used data-html="true" attribute to allow HTML in the tooltip. Howev ...

javascriptjquerycssbootstrap-4tooltip

Tips for stopping links in iOS web applications from launching in a new Safari tab

I am in the process of developing an HTML application specifically for iPads. To enhance user experience, I have added the web app to the homescreen using the "favorite" option. However, I encountered an issue where every internal URL opens in a new Safari ...

javascriptjqueryhtmliossafari

Tips for customizing the color of mat-select placeholder text?

I've been attempting to modify the color of a mat-select placeholder. It functions properly when using 'background-color' but not when using 'color'. Below is my CSS code: /deep/ .mat-select-placeholder { color: red; } .mat-s ...

cssangularangular-material-5

What are the best techniques for showcasing rich text content in vue.js?

I'm working on a web application and attempting to showcase uploaded rich text content using vue.js. The content is generated by Action Text in the following format. <h1>text</h1><div>sample text<br><action-text-attachment ...

javascripthtmlvue.jsactiontext

Empty area beneath the body in Chrome Device Mode

Can anyone explain why there is a strange blank space under the body tag in mobile view on Chrome (other browsers like Firefox and Internet Explorer display it correctly)? Here is the simple code that I am using: <html> <meta name="viewport" con ...

javascripthtmlcss

Any ideas on how I can use PHP or JavaScript to repeatedly execute a segment of HTML code?

I recently tried using a for loop and heredoc in PHP with code that looks something like this: $options = ''; for($Year = date("Y"); $Year <= date("Y") + 5; $Year++) { $options .= "<option>$Year</option>\n"; } $Select = ...

phpjavascripthtmlloops

Utilizing HTML data retrieved from an ajax request

I am utilizing a load more button to display content fetched from a database via ajax. Here is how the ajax call is structured: // JavaScript Document // Function to load more builds $(document).ready(function(){ var pageIndex = 1; $('#loadmorebuild ...

javascriptjqueryhtmlajaxjson

A guide on embedding the flag status within the image tag

I would like to determine the status of the image within the img tag using a flag called "imagestatus" in the provided code: echo '<a href="#" class="swap-menu"><img id="menu_image" src="images/collapsed.gif" hspace = "2"/>'.$B-> ...

phpjavascriptcssimage

Concealing content to prevent it from being accessed through HTML and JavaScript inspection techniques

I created a website with a simple guessing game where users can win if they enter the right code. My approach involves using JavaScript: <script> function z() { var b = document.getElementById('idea'); var a = document.g ...

javascripthtml

Adjusting the width of a nested iframe within two div containers

I am trying to dynamically change the width of a structure using JavaScript. Here is the current setup: <div id="HTMLGroupBox742928" class="HTMLGroupBox" style="width:1366px"> <div style="width:800px;"> <iframe id="notReliable_C ...

javascriptjqueryhtmliframewidth