What is the best way to incorporate media queries in order to reduce the padding around my image?

Currently, I am working on a small gallery and have successfully implemented Salvattore (similar to Masonry). However, a challenge has arisen when resizing the web page - the padding remains at 10px instead of reducing to 5px as desired. The goal is to ensure all three columns remain visible while maintaining aesthetically pleasing padding akin to Pinterest's layout. Despite attempts with a media query in the HTML and CSS provided below, the issue persists:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="salvattore.js">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>All Things Pink!</title>
    </head>

    ...

@media (max-width: 450px) {
    img {
        padding: 5px;
    }
}
cssresponsive-designmedia-queriesscreen-size

Answer №1

It seems like the @media rule in your code is not correctly formatted. You can try replacing "@media" with "@media only screen and" and refer to this link for more information: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp. Hope this helps!

body {
padding-top: 70px;
}

.jumbotron {
    color: rgb(255, 159, 146);
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
background-color: #FFF;
}

.jumbotron p {
    letter-spacing: 4px;    
}

.navbar-inverse {
    background-color: #f06464;
    border-color: #666;
}

.navbar-inverse .navbar-brand {
    color: #FFF;
}

.navbar-inverse .navbar-nav>li>a {
    color: #FFF;
}

#grid[data-columns]::before {
    content: 3 .column.size-1of3;
}

.column { 
    float: left;
}

.size-1of3 { 
    width: 33.333%; 
}

img {
    max-width: 100%;
    padding: 10px;
}

@media all and (max-width: 450px) {
    img {
        padding: 5px;
    }
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="salvattore.js">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>All Things Pink!</title>
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-picture" aria-hidden="true">PINKI</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-nav-demo">
                    <ul class="nav navbar-nav">
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Sign Up</a></li>
                        <li><a href="#">Login</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="container">
            <div class="jumbotron">
                <h1><span class="glyphicon glyphicon-camera" aria-hidden="true"></span> The Image Gallery</h1>
                <p>Random beautiful images of my favorite color.. pink!</p>
            </div>

            <div id="grid" data-columns>
                <div class="column size-1of3">
                    <div>
                        <img src="https://images.unsplash.com/photo-1496193574520-069d8f5c945e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1464982326199-86f32f81b211?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1518691340140-512e66ce957b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1525268771113-32d9e9021a97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1488953994029-e6a7ba3348f7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1495464205000-94ffda5a0064?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1504898770365-14faca6a7320?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1470165451736-166cb1cc909d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1052&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1429152937938-07b5f2828cdd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1445098693232-134135a7ccfa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                </div>
                <div class="column size-1of3">
                    <div>
                        <img src="https://images.unsplash.com/photo-1488895892452-8df3dbc55c68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1461439626172-c3b891456f2e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1292&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1501436513145-30f24e19fcc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1533008093099-e2681382639a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1472850156196-0156e307c552?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1453070516881-ae11f3f6b1b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1519717993199-3b3da2425d64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1517148627138-c9728d76331c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                </div>
                <div class="column size-1of3">
                    <div>
                        <img src="https://images.unsplash.com/photo-1525268771113-32d9e9021a97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1501436513145-30f24e19fcc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1498588113594-33ad5b4d19b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1496372412473-e8548ffd82bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1475&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1490395930356-7e64acf16e23?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=633&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1479912649391-55173fe33de4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1516826049371-1e7856387270?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1514542996715-a1ff9ccfb039?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                </div>
            </div>
        </div>
    <script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="salvattore.js"></script>

</body>

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

Adjustments in margins for printed HTML may vary from page to page in Internet Explorer versions 8 to 11

One challenge I'm facing is with a user-generated report page that is typically printed. There seems to be an unusual bug occurring specifically in Internet Explorer. The layout of the page consists of tables within various divs, all aligned perfectly ...

htmlcss

Excessive whitespace bordering the perimeter of the webpage

I've recently delved into the world of HTML/CSS and I'm working on creating a simple website. However, I'm encountering some white space-related issues above the header/body and around the sides. Despite trying various adjustments with margi ...

htmlcss

Using the ng-app directive value with HTML and CSS can sometimes cause issues and the styles may not apply

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=mainapp&p1=Error%3A…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A19%3A463) <body ng-app=""> It was working fine unt ...

cssangularjsng-app

How to dynamically change the color of an AngularJS element based on a condition?

As someone who is new to AngularJS, I am currently working on changing the color of a table element to yellow if the user has voted on a specific choice. <div ng-show="poll.userVoted"> <table class="result-table"> <t ...

cssangularjsconditional-statements

What are the steps to create a unique popup div effect with jQuery?

Upon clicking the icon on this page, a mysterious div appears with information. I'm completely baffled by how they achieved this cool effect using css/jQuery tools. Can anyone shed some light on the mechanism behind this? ...

javascriptjqueryhtmlcss

The Tailwind preset is generating CSS code, but the webpage is not displaying the intended styles

Can anyone explain why the preset is generating CSS in the output file, but the styles are not displaying in the browser? When I manually write CSS in newstyle.css, it gets outputted to output.css and renders correctly in the browser. I attempted adding t ...

javascripthtmlcsstailwind-csspreset

Having trouble applying CSS to multiple classes used in an AJAX call

I'm trying to utilize richfaces for some fast AJAX widgets, but I am encountering difficulties in setting CSS parameters for them. After inspecting the generated code, I found that the elements have the classes "rf-ds" and "rpds". Despite applying st ...

javacssajaxjsfrichfaces

Angular implementation of a dynamic vertical full page slider similar to the one seen on www.tumblr

I'm determined to add a full-page slider to the homepage of my Angular 1.x app After testing multiple libraries, I haven't had much luck. The instructions seem incomplete and there are some bugs present. These are the libraries I've experi ...

javascripthtmlcssangularjsfullpage.js

Adaptive Website displayed within an iframe

Currently, I have a responsive website that can be viewed here. The main objective is to embed this site into an iframe while maintaining its responsiveness. I attempted embedding my site in JSFiddle for testing purposes, which you can see here. However ...

javascripthtmlcsstwitter-bootstrapresponsive-design

Having trouble understanding the odd behavior in IE7. Suddenly seeing a scrollbar appear when hovering

The webpage layout I am currently experiencing issues with can be found at the following link: When viewing this page in ie7 or ie8 Compatibility View mode, a strange horizontal scrollbar appears whenever I hover over one of the menu items. It seems that ...

htmlcss

When arriving on a page via an HTML anchor tag, the CSS style does not appear. How can I "reinstate" it?

I have set up a website with an index.html page that links to a contact.html page using anchor tags. On the contact.html page, there are anchor tags that should navigate the user back to specific sections of the index.html page. The navigation works fine, ...

javascripthtmlcssanchor

Adjust the font size within a container using HTML code, no CSS required

Is it possible to directly change the TextSize and TextColor within the HTML Document? I need it to be within this specific box (same class) because of the background color. However, the text size always remains the same. The HTML line is: Which button re ...

htmlcss

HTML/CSS - How to make an element wider than its containing element while staying visible

I am currently working on a web page that generates a table with a green background labeled by an h2 element. The challenge I'm facing is ensuring that the h2 element extends horizontally as far as the user scrolls so that there is always a green bar ...

htmlcsslayout

What is the best way to eliminate the space underneath a graph?

Despite trying multiple solutions, I'm still struggling to remove the excess blue space below the graph that appears when clicking the submit button. Any insights into what might be causing this issue? JSFIDDLE Below are the CSS styles related to t ...

javascriptjqueryhtmlcss

What is the best way to ensure that the text within Span children is properly laid out to match the width of the parent div tag?

This particular instance involves setting the width of the div tag to 200px and organizing all the span children to occupy the entire width of the parent div tag. If the first row is filled, the span tags should then flow into a second row. My attempt at ...

htmlcss

Resize the Bootstrap select element based on its contents

My HTML code includes a <select> element that is styled using Bootstrap 5. <div class="col-md-12"> <div class="mb-3"> <label asp-for="Schedule.Minutes" class="control-label"></l ...

htmlcsstwitter-bootstrapasp.net-corebootstrap-5

Tips for aligning thumbnail text to the right on a small viewport with Bootstrap

Here is a visual representation of the standard thumbnail layout Once the viewport reaches the small size, the layout should switch to this design: Bootstrap only shrinks the container by default, as demonstrated in this jsfiddle: http://jsfiddle.net/32 ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Issues with message display validation in jQuery

Validation has been applied to the form, and there are div elements within the input fields with corresponding IDs. The goal is to display error messages within those divs. Specifically, if an input field is missing, the errorMessage should be set in the ...

javascriptjqueryhtmlcssjquery-validate

Issues with CSS selectors in Internet Explorer causing problems with Selenium Webdriver C#

When automating a website with Selenium C#, I encountered a NoSuchElementException when trying to click an element using a CSS selector. However, the issue was resolved when using xpath instead. Can someone shed light on why this discrepancy between CSS an ...

cssseleniumxpathselenium-webdrivercss-selectors

The specified selector is invalid or illegal in HTMLUnit

Attempting to mimic a login using htmlunit has presented me with an issue despite following examples. The console messages I have gathered are as follows: runtimeError: message=[An invalid or illegal selector was specified (selector: '*,:x' erro ...

javajavascriptcsshtmlunitweb-crawler