Create responsive divs that contain images, ensuring there is no margin on either the left or right sides

Utilizing server-side script, I am dynamically adding divs that display images of album covers. Below is the structure of the HTML:

<div id="releases">
    <div class="album">
        <div class="cover"><img src="cover.jpg" /><br />Artist</div>
    </div>
    <div class="album">
        <div class="cover"><img src="cover.jpg" /><br />Artist</div>
    </div>
    <div class="album">
        <div class="cover"><img src="cover.jpg" /><br />Artist</div>
    </div>
</div>

Below you can find my current CSS:

#releases {
margin: 20px 0;
width: 100%;
}

#releases div.album {
float: left;
margin-right: 15px;
width: 100%;
max-width: 118px;
}

#releases div.album .cover {    
padding: 2px;
background: #fff;
box-shadow: 1px 1px 2px #a9aaa8;
}

#releases div.album .cover img {
width: 100%;
vertical-align: middle;
}

I am now working on adding margin right to all albums in order to create some spacing between them, however, I would like to avoid having margin before the first and after the last div. Additionally, I am looking into making this design responsive so that the cover artwork and cover div adjust based on the size of the "releases" div.

htmlcss

Answer №1

To eliminate the margin on the first and last div elements: you can utilize :first-child{ margin: 0 } and :last-child{ margin: 0 }, and of course, you can ensure that your website is responsive by using media queries.

The media query I implemented allows you to adjust the window size to observe the #releases div turning gray when the window width is reduced to 600px. You have the flexibility to define specific styles for different screen sizes by modifying the values accordingly.

#releases {
margin: 20px 0;
width: 100%;
}

#releases div.album {
float: left;
margin-right: 15px;
width: 100%;
max-width: 118px;
}

#releases div.album .cover {    
padding: 2px;
background: #fff;
box-shadow: 1px 1px 2px #a9aaa8;
}

#releases div.album .cover img {
width: 100%;
vertical-align: middle;
}

div:first-child {
margin:0;
}

div:last-child {
margin:0;
}

@media( max-width:600px ){
  #releases { 
    background:#ddd;
    height:300px;
  }
}
<div id="releases">
    <div class="album">
        <div class="cover"><img src="cover.jpg" /><br />Artist</div>
    </div>
    <div class="album">
        <div class="cover"><img src="cover.jpg" /><br />Artist</div>
    </div>
    <div class="album">
        <div class="cover"><img src="cover.jpg" /><br />Artist</div>
    </div>
</div>

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

Leverage CSS variables to dynamically create class names within SCSS

Can CSS variables be used to generate class names? I am incorporating SCSS in an Angular project and I am looking to base my class names on the @input color component property. I have stored the input in a CSS variable called --color-variable to utiliz ...

cssangularsass

What is the best way to apply a background color to an element temporarily?

Check out the following code snippet: $('html,body').animate({scrollTop: -20 + $('.clsname').offset().top}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> ... (additional scrip ...

javascriptjqueryhtmlcss

Ways to transfer Material-UI FlatButton CSS to a different Button element

I've recently incorporated a loading button object into my website from (https://github.com/mathieudutour/react-progress-button), and now I want to customize it using the Material-UI FlatButton CSS. However, I'm not quite sure how to achieve this ...

javascriptcssreactjsmaterial-ui

What is the best way to conceal my class element if the data-reviews number is under 5?

I have been experimenting with basic JavaScript for the data-reviews="2" scenario and it worked successfully. However, what I am aiming for is to hide the entire <span> section when the value of data-reviews is less than 5 or any specific ...

javascripthtmlcss

Transmit form data via Ajax request

Thank you for your interest. I am looking to retrieve $_POST['Division'] from a dropdown list: <select name="Division" onchange="setImage2(this);"> <option value="1">Bronze</option> <option value="2">Silver</op ...

javascriptphpjqueryhtmlajax

Is it possible to have a hover box with no spacing in between?

I am currently designing a navigation bar and I want to implement a feature where hovering over each link will display the box/background color without any space in between of Home, About Us, etc. For reference, you can check out this example here: http:/ ...

htmlcsshovernavigationbar

Scraping Google Places using Beautifulsoup for extracting reviews

My objective is to extract User reviews from Google Places reviews, as the API only provides the 5 most helpful reviews. I am using Beautifulsoup to retrieve four key pieces of information: 1) Name of the reviewer 2) Date the review was written 3) Rating ( ...

htmlpython-3.xbeautifulsoup

PHP script to compare the values of two radio buttons

this section contains a group of radio buttons <input type="radio" name="image" id="100" value="a"/> <input type="radio" name="image" id="100" value="b"/> <input type="radio" name="image" id="100" value="c"/> <input type="radio" name ...

phphtml

`send object as argument to directive`

Is there a cleaner way to achieve the following? <my-directive my-object="{Code:'test'}"/> I want to convert the string into an object in the controller without using JSON.parse. Any suggestions? Instead of doing this: <my-directive ...

javascripthtmlangularjs

@media queries for min-width and max-width dimensions

My current setup uses @media queries: HTML: <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS: @media screen and (min-width: 769px) { /* ADD STYLES HERE */ } @media screen and (min-devic ...

cssmobilemedia-queries

"Triggering an event after selecting and opening a file with an input of type file

Check out this snippet of HTML code: <input type="file" id="mysignature_upload" onChange="readURL();"/> We also have some Javascript code: function readURL(){ alert("Hello"); } A potential issue with this code is that the function readURL is on ...

javascriptjquerycsshtml

Can a string be utilized as an HTML id in HTML5 without breaking any rules?

Would it be considered acceptable to use a string as an id? For instance, id="Nick Drake". I have seen that in html4 it is not recommended. Nevertheless, it serves my purpose effectively. I am just curious about the correctness of this approach. Thank you ...

html

Triangulating polygons on a spherical globe

Can all polygons be filled realistically? Take a look at this Codepen. It seems that the ThreeGeoJSON plugin is only able to create outlines for polygons, not fill them. I also experimented with using Earcut for triangulation. drawThreeGeo(data, radius, & ...

javascripthtmlcssthree.js

Attach a floating div to multiple elements throughout a webpage

Looking for the optimal method to place a div in various locations on a webpage while anchoring it from the bottom left. The div should be able to be attached to any element on the page for relative positioning, specifically intended for a tooltip. Each ...

css

Hovering over a link causes malfunction in CSS drop-down menu

I have been struggling for hours to make this drop-down menu work, but it just won't cooperate. I want the list menu .dropdown to appear when you hover over .droptoggle. I'm including the entire page because I can't figure out what's wr ...

htmlcss

Unable to align divs horizontally

On my webpage, I have set up two divs - Box1 and Box2. Within Box2, there are two nested divs called Box2-1 and Box2-2. However, when I view the page, Box1 and Box2 do not align side-by-side as expected. Instead, Box1 moves downwards and lines up with the ...

htmlcss

Exploring NiFi: Techniques for targeting specific DOM elements using child element values

I need to retrieve an ID based on a specific logic in Nifi using Angular/jQuery. In this scenario, there may be multiple IDs with the same name due to the nature of Nifi. Logic Outline #connection-configuration-tabs-content #connection-settings-tab-c ...

javahtmlcssseleniumapache-nifi

Tips for combining multiple lists into a dropdown menu based on selected checkboxes

Imagine a scenario where there are 5 checkboxes, each with a unique value mapped to a specific list of elements. In my particular case, I have an associative PHP array as shown below: [100] => Array ( [0] => Array ( [name] => NameABC [sid] => ...

phpjavascriptjqueryhtmlajax

Strange margins surrounding the entire website

Recently, I've noticed an unusual issue while working on web development projects, whether it be using WordPress or simple HTML - a mysterious whitespace border surrounds the entire site. Even after checking the code and removing unnecessary elements, ...

htmlcsswhitespace

Refreshing on current page with PHP [unveiling a new world of content]

My application consists of 4 pages that utilize PHP sessions. On page 1, users input their username and password, on page 2 they provide additional information, page 3 displays results and requests more details, and finally page 4 is the success page. Upon ...

phphtmlhttp-redirect