Switch the layout of images from four images displayed in a single row to two images displayed in two separate rows using CSS

Is there a way to display 4 images in one row and have them change into 2 images displayed in 2 rows when the responsive view is active?

Here is my page where I am looking to fix the positioning of 4 iframes at the bottom

Answer №1

After inserting a link to your page, the solution becomes clear. Each iframe on your page has a set pixel width value. If you wish to restrict it to 2 per row, assign the float:left;, width:50%;, and margin:0 0 10px 0; properties to the iframe element within a class. Initially, adjust these styling attributes to eliminate any lateral margins causing the total width to exceed 100%. Then, fine-tune the margin/padding values to achieve the desired spacing or specific appearance.

To implement this in your CSS, consider adding the following:

iframe {
   float:left;
   width:50%;
   margin:0 0 10px 0 !important;
}

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

Customize elements such as MuiTab that rely on media queries

Looking to customize the font size for MuiTab using CSS overrides. While following the material-ui documentation for CSS overrides, I successfully adjusted the font size for most elements. However, I encountered an issue with elements that utilize media q ...

Refresh PHP Calculator Display Once Results are Shown

Currently working on a basic calculator project coded in HTML, CSS, JS, and PHP. Here is a glimpse of it: The user input retrieval is handled by JS, while the actual calculations and result display are taken care of by PHP. I am striving to clear out the ...

Issues involving adding elements to an array in CSS, JS, and HTML

I am currently working on a module where exam information is stored in an array and passed to another JavaScript file using localStorage. However, I'm facing an issue where the previous exam data keeps getting overwritten despite using .push method. A ...

New button attribute incorporated in AJAX response automatically

data-original-text is automatically added in ajax success. Here is my code before: <button type="submit" disabled class="btn btn-primary btn-lg btn-block loader" id="idBtn">Verify</button> $(document).on("sub ...

Troubleshooting problem with arrow in Bootstrap accordion

I'm currently developing an accordion feature, and I've encountered a problem where the arrow on the right side of each collapsed section is not visible, although it's still present. I suspect there might be some styling issues causing this ...

What is the best way to align my navigation bar in the middle of two elements with different

I've been struggling with my code for the past couple of days, but nothing seems to be working. I need the navigation bar to be perfectly centered between two elements (<img> and <form>). Right now, it's almost centered, but it starts ...

How can I customize icons within the <mat-nav-list> using Angular?

Is it possible to change the icons as follows? If the list is expanded, display icon "arrow1" Otherwise, show icon named "arrow2". How can I determine if the list is expanded and implement this in HTML? <mat-nav-list> <mat-list-item> ...

"Exploring How to Read Multiple Values in the Request Body Using Node.js

I am new to NodeJs development and have a question. It may be basic, but I'm not sure how to proceed. I have a task to read a request field that can contain multiple values in a JSON array like this: { "email" : "<a href="/cdn-cgi/l/email-prote ...

How to solve the problem of overlaying images using CSS

I'm utilizing relative and absolute positioning but for some reason, it's not functioning correctly. Can anyone pinpoint where I've gone wrong? https://i.sstatic.net/nmd6E.png https://i.sstatic.net/p5GrX.png This is my HTML code: .slid ...

Modifying the default accordion svg icon in Bootstrap 5: A comprehensive guide

Looking to customize the bootstrap icon for accordions Instead of the standard arrow icon, I want to utilize the <i class="bi bi-plus-circle"></i> and <i class="bi bi-dash-circle"></i> bootstrap icons. One icon ...

HTML structure consisting of a 3 by 3 grid

Creating a 3x3 grid with cells that have varying heights depending on content is proving to be challenging. Except for the cells marked with red arrows, the rest of the grid has fixed height in pixels. I attempted to build a 3x3 grid using divs to experi ...

The correct implementation order ensures that Bootstrap takes precedence over my CSS

First, I included the bootstrap CSS file. Next, I added my own CSS file. https://i.sstatic.net/cVWTu.png Why is Bootstrap taking precedence over my CSS? I've rearranged the order of the files and there are no "!important" designations in the Boo ...

Having trouble accurately referencing the domain across various servers

I have set up two servers for production - one for php files and the other for static (css, js) files. Within my config.php file: $path ="https://mystaticdomain.com/"; To simplify access to paths, I created a variable to store the path for css and js fi ...

What is the best way to delete HTML classes that were generated by a function?

Currently, I'm immersed in the Etch A Sketch project as part of my journey through The Odin Project. Using DOM manipulation, I successfully created a grid and displayed it on the screen. Now, my aim is to allow users to resize the grid by removing the ...

Tips for creating a full-length sidebar below the top navigation using Bootstrap 4

Recently started using Bootstrap and decided to work with the alpha version of Bootstrap 4 to create a website for my home network. My main concern is with the sidebar, as I want it to cover the entire left side of the page, starting just below the top na ...

Learn how to manipulate the DOM by dynamically creating elements and aligning them on the same line

Providing some context for my page: The section I have always contains a single input field. Below that, there is an "add" button which generates additional input fields. Since only one field is required on the screen, the following fields come with a "de ...

Using the radius to determine the center point of the circle

<span class="qs">Q{{i + 1}} <a href="#question-view"></a></span> <div class="tooltipp text-center bubble[ngStyle]="bubbleStyle(prof?.proficiencyBrightness, prof?.proficiencyRadius)"> </div> In the illustration below, ...

How can I alter the color of a circle when a div is clicked on?

When I hover over 4 divs, their background color changes. Now, I want to click on each of them to change the color of a circle inside an SVG tag. Below are my codes: #a1, #a2, #a3, #a4 { display: inline-block; position: relative; border: 2px solid b ...

Tips for eliminating the gap above the initial HTML table row while utilizing border-collapse: separate

Currently, I am utilizing the border-collapse: separate property to introduce spacing between table rows in my design. However, I am facing a challenge when trying to eliminate the space above the initial table row. What would be the most effective approac ...

What is the best way to expand ScrollToBottom to cover the entire screen height?

Check out this code sandbox that showcases a Logs React component functioning perfectly. The implementation incorporates react-scroll-to-bottom to display a page with a header and logs. What's interesting is that the log section dynamically adjusts i ...