Arrange three div elements to create a layout that is optimized for different screen sizes

Is there a way to align these 3 divs as follows: pickup on the left, phone in the middle, and delivery on the right? I've browsed through similar alignment issues on Stack Overflow, but none of the solutions seem to work for my specific code. It's crucial that these divs maintain their positions within a media query range of 600px-900px - meaning if the screen is currently at 600px and then resized to 900px, the divs should retain their original alignment.

Below is the HTML code:


   <div class="shrinkTopBar">
      <div class="phone">
        <img src="images/pick_it.png" alt="Phone number" />
        <h3>07917569024</h6>
      </div>
      <div class="pickup">
        <img src="images/pick_it.png" alt="Pick it up" />
        <div class="info">
          <h6>Pickup: Yes</h6>
          <p>Borehamwood, London</p>
        </div>
      </div>
      <div class="delivery">
        <img src="images/ship_it.png" alt="Deliver it" />
        <div class="info">
          <h6>Delivered: Yes</h6>
          <p>£5.00</p>
        </div>
      </div>
    </div>

This is the CSS:


.topBar .shrinkTopBar {
width: 80%;
margin: 0 auto;
margin-top: 30px;
text-align: center;
display: flex;
}

.topBar .phone {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 175px;
height: 40px;
}

.topBar .pickup {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 129px;
height: 40px;
}

.topBar .delivery {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 129px;
height: 40px;
}

Any assistance would be greatly appreciated!

Answer №1

 <div class="shrinkTopBar">
 <div class="mrg">
  <div class="phone box-in">
    <img src="images/pick_it.png" alt="Phone number" />
    <h3>07917569024</h6>
  </div>
  <div class="pickup box-in">
    <img src="images/pick_it.png" alt="Pick it up" />
    <div class="info">
      <h6>Pickup: Yes</h6>
      <p>Borehamwood,London</p>
    </div>
  </div>
  <div class="delivery box-in">
    <img src="images/ship_it.png" alt="Deliver it" />
    <div class="info">
      <h6>Delivered: Yes</h6>
      <p>£5.00</p>
    </div>
  </div>

.shrinkTopBar .mrg{

    margin:-20px -10px 0;
    }
    .shrinkTopBar .box-in{
    float:left:
    width:33.33%;
    padding:20px 15px 0;
    }

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

Acquire the stripe color scheme of Bootstrap tables

I have a Razor component that populates a series of divs within a container. Is there a way to utilize the table-striped color scheme for my odd divs without replacing it entirely? Alternatively, if I create a new CSS class called "Div-Stripe-Row." Can ...

Is it possible to securely share login details on the internet?

I'm currently brainstorming different ways to securely display FTP, database, and hosting information for website projects on my project management site. One potential solution I'm considering is encrypting the passwords and developing an applica ...

Save a PNG file using the HTML5 Canvas when the Submit button is clicked, with the help of PHP

I am looking for assistance with a signature capture form. I came across a standard template on Github that works perfectly, but I wanted to customize it further. However, my Javascript skills are still in the early stages. The current code allows you to c ...

Achieve full parent width with floated divs

My goal is to arrange 10 boxes horizontally on a webpage. Each box must have a minimum width of 150px and a maximum width of 299px. The challenge is to fit as many boxes as possible across the page without any gaps, ensuring that each box has an equal widt ...

Implement Infinite Scrolling Pagination in WordPress

I'm completely new to Wordpress and currently utilizing the FoundationPress theme. My goal is to include a button that users can click on to load more posts. Essentially, I want users to see four blog posts initially and then be able to load the next ...

Zero results returned for the angularjs script

I am working on enhancing my skills in angularjs, but I am facing an issue where only the categories are being displayed and the products are not showing up. There are no error messages, so I am having trouble pinpointing where the problem lies. Here is t ...

What is the best way to showcase two SVG clocks on a single webpage?

The issue arises when combining the desktop and mobile versions of the clock script. The first clock works fine on its own, but upon duplicating another set of scripts for the second clock, it encounters display problems. I have appropriately labeled the c ...

Differences in CSS between IE10 and Chrome are causing compatibility issues

Website in question: What is causing the difference in display between IE 10 and other browsers? The website appears to function correctly on Chrome: IE 10: ...

Achieving distinct CSS margins for mobile and desktop devices in a Django template without the need for multiple {% block content %} statements

Is there a way to dynamically change the margin-left of my main {% block content %} in the base.html template based on whether the viewer is using a mobile or desktop device? This is how my current base.html looks like: <div class="content container-f ...

Utilizing CSS for displaying and hiding content based on its unique identifier

Is it possible to show/hide a div using only CSS based on its ID? Showcasing this functionality in jQuery or vanilla JavaScript is straightforward, but can the same effect be achieved with pure CSS? The checkbox hack requires a specific structure to func ...

Step-by-step guide for setting up CodeMirror

I'm feeling a bit lost with what to do next: <link rel="stylesheet" href="lib/codemirror.css"> <script src="lib/codemirror.js"></script> <script> var editor = CodeMirror.fromTextArea(myTextarea, { mode: "text/html" }); ...

Unexpected behavior exhibited by form in response to CSS styling

When I try to adjust the values of left, top, and right, nothing seems to change. I also experimented with the position attribute without any success. What could be the mistake on my end? .PHP_A { position: static; left: 200px; top: 400px; righ ...

How can I incorporate a search bar or similar feature on my website that mimics the functionality of Ctrl+F?

Is there a way to incorporate a search bar on certain pages of my website that functions similarly to the Ctrl+F feature in Google Chrome? Essentially, I am looking for a "find" function that searches the entire page(s). My site is built using WordPress, ...

What is the best way to implement media queries for mobile phones and desktop computers?

I've come across similar questions before but still can't wrap my head around it. Here's my dilemma: I want the index page of my website to display in desktop layout on desktops and mobile jquery on mobile devices. Currently, I have set up m ...

Having trouble dynamically adding HTML elements in JQuery

I am dynamically adding HTML elements during runtime using an AJAX call from a JavaScript file. Currently, I am attempting to use a combo box drop-down element to display a list of data. Here is how I am trying to achieve this in my script: $("#myList") ...

What sets XHTML 1.1 apart from other document types?

Visit this page for more information: XHTML 1.1 makes it simple to create various display formats, including printing pages, wireless device and PDA pages, and browser pages for television by creating a new CSS (cascading style sheet) for the specific ...

The unexpected syntax error, indicated by an ampersand followed by a quotation mark, was encountered in [location] on line 7

Every time I try to run my code, I encounter the following error message: Parse error: syntax error, unexpected '"' in D:\server\WT-NMP\WWW\myproj1\insert.php on line 7 This is the code that is triggering the error: &l ...

Expression fragment in Thymeleaf

In splitting my templates into head/main/footer parts using thymeleaf, I have found a method to include stylesheets and javascript on certain pages while excluding them from others. This is achieved through the use of fragment expressions outlined here. M ...

What are the precise steps to create a flawless scrolling area?

I am facing an issue with setting accurate scroll zones for my divs. Here's my ideal scroll zone location: scroll zone in red Currently, I have a maximum of 4 divs and each div should contain a total of 10 rectangles per category (concentration, boos ...

CSS: Targeting a particular instance of a specific element type within an HTML document

My goal is to target specific occurrences of a certain type of element in CSS for styling purposes. Consider the following example: <span>Some random stuff</span> <p>Occurrence 1 of p</p> <ul> <li>Random stuff</li&g ...