Open space on responsive website causing layout issue

I need help troubleshooting some code for a responsive website. When I shrink the screen and an item goes "under" another one instead of next to it, it creates a large gap that I want to avoid. Ideally, I would like the items to shrink up to a certain minimum width. If they still don't fit and go under another item, I want them to grow big again so everything looks good without any gaps.

body {
  margin: 5% 7%;
  background-color: #A07429;
}

main {
  overflow: hidden;
  background-color: #F2C473;
  border: 2px solid black;
  border-radius: 80px;
  padding-top: 10%;
  padding-bottom: 10%;
  padding-left: 6vw;
  padding-right: 11vw;
}

.item {
  margin-left: 5vw;
  min-width: 250px;
  max-width: 320px;
  width: 100%;
  float: left;
  vertical-align: middle;
  background: #543E18;
  text-align: center;
  color: white;
  font-size: 200%;
  margin-bottom: 10%;
  display: inline-block;
}

img.itemimg {
  width: 90%;
  margin: 5%;
}
<main>
  <div class="item"><img class="itemimg" src="media/pic1.JPG" alt="refresh!">
    <p>link1</p>
  </div>
  <div class="item"><img class="itemimg" src="media/pic2.jpg" alt="refresh!">
    <p>link2</p>
  </div>
  <div class="item"><img class="itemimg" src="media/pic3.jpg" alt="refresh!">
    <p>link2</p>
  </div>
  <div class="item"><img class="itemimg" src="media/pic4.jpg" alt="refresh!">
    <p>link1</p>
  </div>
</main>

htmlcss

Answer №1

To align all the divs at the center and reduce the gap, you can utilize the following CSS properties:

display: flex;
flex-wrap: wrap;
justify-content: center;

For more information on how to use Flexbox for layout, you can refer to this Flexbox guide.

body {
  margin: 5% 7%;
  background-color: #A07429;
}

main {
  overflow: hidden;
  background-color: #F2C473;
  border: 2px solid black;
  border-radius: 80px;
  padding-top: 10%;
  padding-bottom: 10%;
  padding-left: 6vw;
  padding-right: 11vw;    
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  margin-left: 5vw;
  min-width: 250px;
  max-width: 320px;
  width: 100%;
  float: left;
  vertical-align: middle;
  background: #543E18;
  text-align: center;
  color: white;
  font-size: 200%;
  margin-bottom: 10%;
  display: inline-block;
}

img.itemimg {
  width: 90%;
  margin: 5%;
}
<main>
  <div class="item"><img class="itemimg" src="media/pic1.JPG" alt="refresh!">
    <p>link1</p>
  </div>
  <div class="item"><img class="itemimg" src="media/pic2.jpg" alt="refresh!">
    <p>link2</p>
  </div>
  <div class="item"><img class="itemimg" src="media/pic3.jpg" alt="refresh!">
    <p>link2</p>
  </div>
  <div class="item"><img class="itemimg" src="media/pic4.jpg" alt="refresh!">
    <p>link1</p>
  </div>
</main>

Answer №2

Here is the solution you've been looking for! Make sure to give it a try: https://jsfiddle.net/sandymizz/qsv0tzvr/

body{
        margin: 5% 7%;
        background-color:#A07429;   

    }

    main{
        overflow: hidden;
        background-color: #F2C473;
        border: 2px solid  black;
        border-radius: 80px;
        padding-top: 10%;
        padding-bottom: 10%;
        padding-left: 6vw;
        padding-right: 11vw;
    }

    .item{
    margin: 0 5%;
    width: 40%;
    float: left;
    vertical-align: middle;
    background: #543E18;
    text-align: center;
    color: white;
    font-size: 200%;
    margin-bottom: 10%;
    display: inline-block;
    }

    img.itemimg{
        width: 90%;
        margin: 5%;
    }
    
    @media all and (max-width:767px){
      .item {
    width: 90%;
    }
    }
<main>
    <div class="item"><img class="itemimg" src="media/pic1.JPG"                         alt="refresh!"><p>link1</p></div>
    <div class="item"><img class="itemimg" src="media/pic2.jpg"                 alt="refresh!"><p>link2</p></div>
    <div class="item"><img class="itemimg" src="media/pic3.jpg" alt="refresh!"><p>link2</p></div>
    <div class="item"><img class="itemimg" src="media/pic4.jpg" alt="refresh!"><p>link1</p></div>
    </main>

Answer №3

Implement media queries within your CSS documents as illustrated in the following example. This approach is likely to resolve the issue you are facing.

@media screen and (min-width:320px) and (max-width:480px)
{
    //add your custom code 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

SASS fails to recognize the variable

I am trying to incorporate borders based on specific @media breakpoints. Here is the code I have written: @media(max-width:767px) { $height: auto; $grid: 1; } @media(min-width: 768px) and (max-width:991px) { $height: 370px; $grid: 2; } @media(min-width: 9 ...

csssass

Develop a dynamic animation using gradient and opacity properties

I'm still getting the hang of HTML, JavaScript, and CSS but I recently made some changes to someone else's code to animate a gradient. The original code used background: rgb, but I switched it to background: rgba. It seems to be working fine, but ...

javascripthtmlcssgradient

Guide on adjusting the CSS styling of elements in real-time from the backend using a user customization panel to modify the appearance of various web pages

Imagine a scenario where we have a website consisting of multiple pages, including a user account page. The user has the ability to modify the color, font size, and style of certain elements on other pages for their own viewing preferences. How can this fu ...

javascriptcssreactjsdynamiccss-in-js

The functionality for bold and italics does not seem to be functioning properly in either Firefox

Text formatted with <b></b> and <i></i> tags appears correctly on iPhone and Internet Explorer, but lacks formatting in Firefox or Chrome. I have included the .css files below. Additionally, I attempted to add i { font-style:italic ...

htmlcss

If a second instance is hidden, SVG will appear as a mysterious black box

Two separate div elements each contain an identical SVG graphic. If I hide the first div by setting it to "display: none", the SVG in the second div appears as a gray box. This issue is present in both Firefox and Chrome browsers. Any insights into why ...

javascripthtmlcsssvg

Steer clear of using absolute positioning in Material-UI and React for better styling and layout

Is there a way to achieve the same layout without using position: absolute for the "Hello There" button? I want to remove that CSS property while keeping the design intact. Any better suggestions? Feel free to check out my codesandbox: CODESANDBOX -----&g ...

cssreactjsmaterial-ui

How can I adjust the gravity or positioning of a tipsy tooltip in jQuery?

Is there a way to adjust the position or gravity of Tipsy? The plugin offers various options for gravity that can be set through the script: nw | n | ne | w | e | sw | s | se Currently, I have set it to s position, as shown in this demo: http://jsfiddle. ...

javascriptjquerycsstipsy

Appear and disappear div

I am seeking to achieve a specific goal: I want to fade in a div with text after a certain number of seconds, then fade it out. I also want to repeat this process for 4 other divs, ensuring that they do not interfere with each other by appearing while the ...

javascriptjqueryhtml

Masonry layout organizes images in a vertical stack, with one image per row

After implementing Masonry on my website, I encountered an issue where all the images stack vertically in a single row once the page loads. Instead, I would like them to stack both horizontally and vertically. You can view the problem on My Jsfiddle. This ...

javascriptcsstwitter-bootstrapjquery-masonrymasonry

Why is my output getting mixed up with the header on the navigation bar page?

output capture image https://i.sstatic.net/BYJnk.jpg here is the code snippet //ui.r library(shiny) navbarPage(theme = "style.css",img(src="logo.jpeg", width="300px"), tabPanel("Dashboard"), tabPanel("Products"), tags$head( t ...

javascriptjquerycssrshiny

Enhance your website visuals with jQuery Sparklines and CSS Transforms

I've incorporated jQuery Sparklines into an html page that I've resized using the transform: scale property. However, this adjustment has caused the jQuery Sparklines tooltip to appear in the incorrect location. For instance, consider the code sn ...

javascriptjquerycsssparklines

Tips for creating more efficient styled components with repetitive styles

Utilizing Styled Components for styling in my project has resulted in numerous icons being defined. The style file contains the following code: my-component.styles.ts import { ReactComponent as CloseIcon } from 'svg/close.svg'; import { ReactCom ...

javascriptcssreactjsecmascript-6styled-components

What factors determine the height of a table cell?

My forehead is now a grid of indents after battling with HTML tables for days, leaving marks resembling my keyboard. Speaking of grids, I'm curious if there are any clear guidelines on the sizing of <td>. Does it depend solely on content? Is i ...

htmlcssrenderinghtml-table

What is the jQuery alternative for the classList property in vanilla JavaScript?

Currently, I am working on a collaborative project with two acquaintances. One of the requirements is to stick to either vanilla JavaScript selectors like document.getElementById("thisDiv"); or jQuery selectors such as $("#thisDiv"); to maintain consis ...

javascriptjqueryhtml

What is the best way to implement JavaScript for loading and removing content based on button clicks on a webpage?

I'm in need of a vanilla JavaScript solution (I know JQuery options exist, but I want to stick to vanilla JS for now)? Currently, I am using a simple page as a testing ground for my ongoing project. The page consists of two buttons that load HTML pag ...

javascripthtmldom

How to customize the background of radio buttons in HTML

I want the background color to stay consistent as lightgray for each <ul>. Currently, clicking the radio button causes the ul's background to change incorrectly. I am unsure of how to loop through all available ul elements using jQuery and woul ...

javascripthtmljquerycss

Launching a URL in a pop-up window with customized title and address bar

I am seeking to implement a feature similar to the following: <a href="post/23">post 23</a> When a user clicks on this element, I want a popup div to fade in and load the HTML from page post/23 into it. Additionally, I would like the title an ...

javascriptjqueryhtml

Calculator screen filled with numbers overflowing beyond its boundaries

I'm encountering an issue with my calculator created in create-react-app where the numbers are overflowing off the screen. Specifically, when inputting very large numbers like 11111111111111111111111111111111, they exceed the output container. I am lo ...

cssreactjscalculatorcreate-react-app

How can elements be displayed differently depending on the return value of a function?

Basically, I am looking to display different content based on the status of a job: Show 'Something1' when the job is not processing Show 'Something2' when the job is running and has a status of '0' Show 'Something3&apos ...

htmlangular

Ensuring radio button validation prior to redirecting to contact form

I created a survey form using HTML and CSS. I am looking to add validation to the questions before redirecting to the Contact form page. Currently, when a user clicks on the submit button in the Survey form, the page redirects to the contact form. Howeve ...

javascriptjqueryhtmlcss