When the webpage is reduced in size, there is an abundance of unused white space

As I resize my website to 768 pixels, I notice an excess of white space on the left side. I've tried removing default padding and margins, adjusting image sizes, but the issue persists. Here is a snippet of the code. Any assistance would be greatly appreciated.

{
  margin: 0px;
  padding: 0px;
}

div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 120px;
    position: relative;
    left: 30%;
    color: #f8d501;

}
img {
    width: 100px;
    height: 100px;
    border: solid 5px #f8d501;
}
.caption {
    display: block;
    color: #f8d501;
}

div.item-1 {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 120px;
    padding-top: 40px;
    position: relative;
    left: 30%;
    color: yellow;
}
img {
    max-width: 100%;
    height: auto;
}
.caption-1 {
    display: block;
    color: #f8d501;
    font-family: 'Verdana-bold';
}

h1 {
    padding-top: 20px;
    color: #fad700;
    transform: rotate(-90deg);
    font-size: 50px;
}

body {
    background-color: #0d395e;
}

.logo-floatRight {
    padding-left: 20px;
    display: flex;
    border: none;
    max-width: 100%;
    height: auto;
}

.logo-floatLeft {
    padding-left: 20px;
    display: inline-block;
    border: none;
    max-width: 100%;
    height: auto;
    padding: 10px;
}

.flex-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 35%;
    max-width: 600px;
    height: auto;
}

.logoHeader {
    color: #f8d501;
    font-family: "Franklin Gothic Heavy regular";
    padding: 10px;
    max-width: 100%;
    height: auto;
}

.text {
    color: #f8d501;
    text-align: center;
    padding-right: 30px;
}

.logo-floatLefts {
    border: none;
    width: 100%;
    height: auto;
}

@media only screen and (max-width: 768px) {
    img {
        width: 60%;
    }

    .logoHeader {
        font-size: 15px;
    }

    .flex-container {
        width: 120px;
        height: 120px;
    }

    .caption {
        font-size: 12px;
    }

    .item {
        font-size: 15px;
    }
}
}
<div class="main">
    <div class="showcase-content">
<div class="flex-container">
    <img src="https://via.placeholder.com/150" class="logo-floatLeft" alt="logo">
    <h2 class="logoHeader">LATIN<br>AMERICAN<br>FILM<br>FESTIVAL IN<br>AUSTRALIA</h2>
    <img src="https://via.placeholder.com/150" class="logo-floatRight" alt="logo"> 
</div>

<div class="item">
    BRAZIL 
    <img src="https://via.placeholder.com/150"/>
    <span class="caption">LIFE IS A BITCH<br>Como e Cruel Viver Assim</span>
</div>
<div class="item">
    CHILE
    <img src="https://via.placeholder.com/150"/>
    <span class="caption">BROKEN PANTIES<br>Colzones Ratos</span>
</div>
<div class="item">
    COLOMBIA
    <img src="https://via.placeholder.com/150"/>
    <span class="caption">BAD LUCKY GOAT<br>El Dia De La Cabra</span>
</div>
<div class="item">
    COSTA RICA
    <img src="https://via.placeholder.com/150"/>
    <span class="caption">THE GAZELLE'S DANCE<br>El Baile La Gacela </span>
</div>
...
</div>

htmlcsswhitespace

Answer №1

I made some adjustments to the styling by removing extra margin and padding from specific classes, ensuring that the content remains centered without any unnecessary spacing. Additionally, I refined the CSS properties for certain elements and optimized the media queries for better responsiveness.

{
      margin: 0px;
      padding: 0px;
    }

    div.item {
        /* To correctly align image, regardless of content height: */
        vertical-align: top;
        display: inline-block;
        /* To horizontally center images and caption */
        text-align: center;
        /* The width of the container also implies margin around the images. */
        width: 120px;
      position: relative;
      color: #f8d501;

    }
    img {
        width: 100px;
        height: 100px;

        
         border: solid 5px #f8d501;
    }
    .caption {
        /* Make the caption a block so it occupies its own line. */
        display: block;
        color: #f8d501;
    }

    (Remaining CSS code removed for brevity)

    @media only screen and (max-width: 768px) {


    .logoHeader{
      font-size: 15px;
    }

    .caption {
    font-size: 12px;

    }

    .item {
    font-size: 15px;

    }


    }
<div class="main">
         // HTML code goes here
</div>

Answer №2

Make sure to include the padding:0 and margin:0 for the body, as it seems to have been overlooked in your code. If the issue persists, try commenting out each section to identify which one is causing the wider width and creating the white spaces.

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 is the best way to create a floating navigation bar that appears when I tap on an icon?

As a beginner in the realm of React, I recently explored a tutorial on creating a navigation bar. Following the guidance, I successfully implemented a sidebar-style navbar that appears when the menu icon is clicked for smaller screen sizes. To hide it, I u ...

javascripthtmlcssreactjs

Tips for personalizing the css styles of an alert box?

I am in need of customizing the alert box using CSS attributes. Currently, I am able to achieve a similar effect with the code below: JQUERY: $('<div class="alertMessage">Error first</div>') .insertAfter($('#componentName' ...

javascriptjqueryhtmlcss

Place two divs side by side with the second div filling up the remaining space on the line

Hello there, can anyone lend a hand with this problem? This is the code I have been working with: <html> <body> <div style="width=100%"> <div style="float:left; background-color:Red; height:100px">Red</div> <div st ...

htmlcss

What is the best way to ensure the inner scrollable container maintains the same height as the outer container?

When testing the simplified version in the Browser at https://codesandbox.io/s/competent-bassi-yjtoj, everything worked as expected. However, in my project where I'm utilizing Electron, React, MUI, and plain CSS, I encountered an issue that I'm ...

cssreactjsflexboxelectronmaterial-ui

Instant access to an interactive online platform

Is it feasible to create a shortcut from a webpage to my desktop for quick access? For instance, if a dynamic web page has 15 documents and I want to easily create shortcuts to them on my desktop by clicking on each one. I understand this is a brief quest ...

javascripthtmlasp-classic

Tips for shutting down an open section within a jQuery Accordion?

I am having trouble closing the active panel using jQuery. The rest of my code is functioning perfectly, but for some reason, I can't get the active panel to close. Currently, the code is working correctly in that only one panel can be open at a time ...

javascriptjqueryhtmlcss

Creating a vertical scrollbar with CSS flexbox for columns set at 100% height in a row for FF, IE, and

I am currently working on an HTML application that needs to fit perfectly within a designated space without causing any page level scrollbars. I have utilized flexbox styles extensively to achieve this, but unfortunately, I am facing compatibility issues w ...

htmlcssflexbox

The setLanguage function in jsPDF does not support rendering different language characters

I'm currently working with jsPDF in Angular 2 and I'm experiencing an issue where my HTML content is not converting successfully into a PDF when it's written in Hebrew. Other languages seem to work fine, but Hebrew is causing a problem. How ...

javascripthtmlangularjspdf

Exploring the application of URL parameters in HTML code

How can I use URL parameters retrieved with Javascript in my HTML? <script> var url_string = window.location.href; //window.location.href var url = new URL(url_string); var c = url.searchParams.get("name"); console.log(c); </script> I am tryi ...

javascripthtmlurlweb

Safari CSS issue: Relative parent and child with pseudo selector not producing consistent output across different browsers

I'm not seeking a specific fix for the code, but rather an explanation as to why it behaves this way. In Safari, children elements with a relative parent appear in a different position compared to other browsers. Changing the child to absolute positi ...

htmlcsstwitter-bootstrapsafaricross-browser

What is the best way to keep my bottom navigation bar attached to my top navigation bar?

I am facing an issue with my two navbars. The top navbar sticks to the top of the page when the user scrolls down, which works perfectly fine. However, when the user logs in, the bottom navbar becomes visible. Unfortunately, the bottom navbar is not sticky ...

javascriptjqueryhtmlcsstwitter-bootstrap

Error: The identifier has already been declared and cannot be re-declared

I am attempting to create a modal-cookie feature that will display a modal on page load if a cookie named "name" does not exist. However, I encountered an error: Uncaught SyntaxError: Identifier 'addCookie' has already been declared. This erro ...

javascripthtmljquerybootstrap-4

The data from my ajax code is not being successfully transmitted to the database

I'm having trouble using ajax to add data to the database. I'm not sure if the issue lies in the ajax code or the PHP code. Here is a snippet of my code: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></ ...

javascriptphphtmlajaxdatabase

Toggling javascript functionality based on media queries

On one of my slides, I want to display images that are specific to different devices like iPhone, iPad, and desktop. I am looking for a way to filter these images based on the device. Using display:none won't work as it's JavaScript, but here is ...

javascripthtmlcss

Transmitting flawless data to the Angular controller

In my Angular application, I have some checkboxes that are pre-checked and in the ng-pristine state. How can I receive these inputs in my controller without marking them as dirty when the form is submitted? <input type="checkbox" name="c1" name="favor ...

javascripthtmlangularjsforms

SVG with embedded fonts failing to display properly in web browsers

Within this SVG, there are two different font types being used: SymbolMT for the mathematical expressions and Hind-Light for the text. Both fonts have been defined within the @font-face section of the SVG. The font used for the math expressions appears a ...

csssvgfonts

The height percentage is not functioning properly even though it has been applied to the html, body, and all wrapper elements

I've been facing a persistent challenge with the height:100% problem. It seems like it should be an easy fix by ensuring all wrapper elements and html, body have height:100%, but no matter what I try, the containers still won't reach the bottom o ...

cssheight

To modify the color of text in a mat-list-option item

Using the mat-selection-list component, I have set up a list of contacts displayed through mat-list-option: https://i.sstatic.net/ri4lP.png Currently, the background-color changes when I click on a specific contact-name (e.g. Graeme Swan), and it remains ...

cssangularangular-material

JQuery Anchor Link Scrolling Problem on Specific Devices

I'm having an issue where my webpage does not scroll correctly to an anchor when a link is clicked. The problem arises from the header size changing based on the viewport width. While it works fine in desktop Chrome, in the mobile version the header h ...

javascriptjqueryhtmlcss

Troubleshooting a vertical overflow problem with Flexbox

Struggling to design a portfolio page for FreeCodeCamp using flexbox layout due to vertical overflow issues. Here is the HTML: <div class="flex-container flex-column top"> <header class="flex-container"> <h1 class="logo"><i clas ...

cssflexbox