I am in need of assistance with my request for two rows of three images to be solved

Hi everyone, I'm new to learning CSS and I need some help with rearranging this code. I want to display 2 rows of 3 images below the "Section" class, but my attempts using float and position aren't working. Can someone guide me on where I might be going wrong?

I am using images with dimensions: 1920x1080.


*{
    padding: 0;
    margin: 0;
}
html{
    /* CSS styles go here */
}
/* More CSS styles... */

If you can take a look at the code and provide some suggestions or corrections, I would greatly appreciate it. Thank you!

Here is the current situation visualized
htmlcssposition

Answer №1

To create a flexible layout, use the following CSS property: display: flex;.

Insert this code snippet into your CSS file:

.Photo-showcase ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
    margin: 10px 0;
}

Remove the following code:

.fig img {
    max-width: 30%;
    max-height: 100vh;
    float: left;
    display:inline-block;
}

Add the below code after removing the previous one:

.fig img { 
    width: 100%;
    display: block;
}

Here is the working code for reference:

(Working code here)
 
<!DOCTYPE html>
(Sample HTML content here)

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

What are some tips for customizing the NavBar Bootstrap 4 Layout to fit a unique design?

Good evening everyone, I am currently working on a website project for a client who has provided me with specific requirements for the Navbar design. While it seemed straightforward at first, I have spent several hours trying to perfect the layout. I am ...

htmlcsstwitter-bootstraprazorbootstrap-4

Showing information retrieved from a database using PHP in a sequential manner

I'm currently working on developing a webpage that features 6 rows of images, with each row containing 4 images accompanied by captions right below them. The structure I have in mind is as follows: IMAGE IMAGE IMAGE IMAGE TEXT TEXT TEXT TEXT IMAGE ...

phphtmlcss

Is there a way to set a maximum width for a div and have a scroll bar appear if the contents exceed that width?

I am dynamically adding divs inside #maindiv, and I am never quite sure how many inner divs will end up inside it. Each inner div has a width of 160px. The CSS I'm using for #maindiv is as follows: #maindiv { overflow: auto; width: 640px; ...

htmlcss

What is the best way to incorporate an onmouseover event so that when the mouse hovers over an image, play/stop/pause buttons are displayed

Furthermore, each button should trigger an event on click. When the pause button is clicked, the button text should toggle between pause and continue, and the action should correspond to the displayed text. This is the HTML code I currently have: Includi ...

javascriptjqueryhtml

Tips for eliminating dots from material icons CSS

Recently, I incorporated a stylesheet from Google's Material Icons into my web project. However, upon implementing the HTML code provided to display the icon, I encountered an unexpected issue - a dot appeared beside the icon, which I do not want to b ...

htmlcssicons

Python Issue with BeautifulSoup: find_all() returning incorrect list of elements

I am currently using Python 2.7.3 and the bs.version I have is 4.4.1 However, when running this code snippet: from bs4 import BeautifulSoup # parsing html = """ <html> <head id="Head1"><title>Title</title></head> <body&g ...

pythonhtmlbeautifulsoup

Differences Between Vuetify Breakpoints and CSS Helper Classes

As I browse through the Vuetify documentation and various code snippets on the web, I often come across examples that mention using either a Vuetify breakpoint or a CSS helper class to make an element responsive to screen size changes. Is there a preferre ...

javascripthtmlcssvue.jsvuetify.js

The hyperlink for making phone calls appears twice on an Android phone

When you click on the number, it will be displayed twice in the phone screen like this... 12345678910,12345678910 ...instead of just once... 12345678910 Take a look at the code snippet below: {#if order.salesRep} <div class="info"> ...

androidhtmltemplateshyperlinkphone-number

Exploring ways to retrieve information stored in localStorage within an android mobile application

I am currently developing an Android App using phonegap. The app is a simple game that generates random numbers for math problems. If the user answers correctly, their score increases, but if they lose, their name and current score are saved in localStor ...

javascriptandroidhtmlphonegap

Decoupling the Top Navigation Bar from the Side Navigation Bar

I currently have a top navigation bar with some menus and a side navigation bar with additional menus. I have applied styling to the vertical navigation bar, but it seems to be affecting all the navigation bars, resulting in an output as shown in the image ...

htmlcsstwitter-bootstrap

Total Tally of All UL Elements - Including Those Within Others

I'm currently working on using jQuery to count all <li> tags within a list, including the nested ones inside a separate <ul>. However, I have been unsuccessful so far and I haven't found a solution to this issue. In the example below, ...

javascripthtmljquery

The toggle buttons in Bootstrap are not functioning as expected despite adhering to the recommended

I have been using Bootstrap 4 and I recently tried to create a toggle button group following the official documentation. Here's the code I used: <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary ...

htmlcssbootstrap-4

Placing a Div element outside of a Flexible Grid Layout

I am currently in the process of developing a responsive website using HTML5, CSS3, jQuery, and Media Queries. One challenge I am facing involves a page containing a gallery of images within a 16-column grid that adjusts nicely for various screen sizes, i ...

jqueryhtmlcssresponsive-designposition

Styling PHP Input Buttons with CSS

I'm facing an issue with styling the button on a working form. Even though I added CSS and declared the button class, it's not applying the styles. The CSS is defined at the top of the HTML file, and the PHP code is embedded within. Both classes ...

phpcss

Creating full-width bootstrap buttons within the navbar

Currently, I am utilizing bootstrap to design the navbar on my website. My goal is to have three buttons within the navbar that, when clicked, will navigate to other pages. Currently, my navbar looks like this: https://i.sstatic.net/31s1f.jpg However, th ...

htmlcssbootstrap-4navbar

Ways to show a div element within an input field?

I want to incorporate tags similar to stackoverflow on my website. Users will be able to create tags for filtering results, searching, showcasing expertise, and more. I have managed to create tags, but I am struggling to display them inside an input box l ...

javascriptjquerycss

Troubleshooting issues with dropdown functionality in HTML when using Bootstrap

I'm encountering an issue with my dropdown menu not functioning properly when using bootstrap. The dropdown only appears on screens smaller than the $md variable. The problem arises when I try to click on the dropdown icon and it does not respond as ...

javascripthtmlbootstrap-4dropdown

Type in "Date" and select a date using your mobile device

Hey, does anyone know a good solution for adding placeholder text to an input with type="date"? I'm looking for a way to utilize the phone's built-in date selection feature on a website, rather than having users manually enter dates using the ke ...

javascripthtmlformsinput

Invoke a function using the output of a different function

There is a function whose name is stored in the value of another function, and I need to invoke this function using the other one. The function I need to call is popup() random() = 'popup()' if ($.cookie('optin-page')) { } I attemp ...

javascriptjqueryhtmlcss

Issues relating to the total count of pages in the uib-pagination component of AngularJS

While there is a previous thread discussing a similar topic Calculating total items in AngularJs Pagination (ui.bootstrap) doesn't work correctly, it does not address my specific issue and I am unsure how to contribute to it. We are using a complex s ...

javascripthtmlangularjsangularjs-directivepagination