What is the proper way to add a margin of 20px to every fourth list item in a four-box layout using CSS?
What is the proper way to add a margin of 20px to every fourth list item in a four-box layout using CSS?
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
}
h1,h2,h3,h4,h5,h6,p{
margin: 0 0 10px;
}
.clr::after{
content: "";
display: table;
clear: both;
}
.fleft{
float: left;
}
.fright{
float: right;
}
.txt_center{
text-align: center;
}
.txt_right{
text-align: right;
}
.list_inline li{
display: inline-block;
}
/* =========================== styling =========================== */
.container{
max-width: 1170px;
margin: 0 auto;
}
.grid_list li{
float: left;
width: calc(100% / 4);
margin: 0 0 20px;
}
.grid_list li .product_item{
border: 2px solid #ccc;
min-height: 300px;
padding: 10px;
}
.grid_list li:not(:nth-child(4n+4)) .product_item{
margin: 0 20px 0 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Repository</title>
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<div class="container">
<ul class="grid_list list_inline clr">
<li class="item">
<div class="product_item">
<h3>Product heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est... etc.`
While I am aware of the <input type="text" readonly /> possibility, it is not entirely secure. For example, if there is an input field that must remain uneditable by users, making it "readonly" can still be bypassed by inspecting the code and remov ...
Seeking assistance on adjusting the opacity of this navbar without affecting the text within it. Any tips on changing the text color as well? <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#" ...
Recently, I created a webpage that functions perfectly on all browsers except for mobile devices. While the design may appear unprofessional, it was purposely done for testing purposes. I suspect that the issue lies within the viewport settings in the CSS. ...
It's a popular UI pattern on mobile devices to have a draggable element containing a scrollable element. Once the user reaches the end of the scrollable content, further scrolling should transition into dragging the outer element. For example, in this ...
I'm currently trying to customize the Material UI Autocomplete component with my own CSS. Specifically, I aim to adjust the font size of the input field. Below is my current implementation: <Autocomplete style={{ width: 200, height: 60, ...
Whenever I click a button to open a popup window, the page unexpectedly scrolls to the top. It's frustrating because if I'm at the bottom of the page and press the 'submit' button, the popup doesn't display in the center as intende ...
Is it true that fewer HTTP requests result in better performance? According to Google's best practice guidelines, reducing the number of unused CSS rules also improves performance. The browser's CSS engine must assess each rule in the file to ...
Flexbox has been a game-changer for me, and I can't help but want to incorporate it into all my projects since I first started using it. Curious Thought I'm wondering if nesting flex-boxes is considered best practice. Could having numerous, espe ...
<div id="container" style="width:100%;"> <div id="left1" style="float:left; width:100px;">float left</div> <div id="left2" style="float:left; width:100px;">float left</div> <div id="remaining">Remaining width&l ...
My appbar contains an image link, a warning indicating the user's current environment, and details about the logged-in user. While testing accessibility with a screen reader, I noticed that tab focus skips over the user details in favor of a link in ...
I'm in the process of developing a website and could use some guidance. I have a specific section where I am aiming for the height to be 79.6% of the body, with the width of that div being dependent on its height. Thus far, my research has only yielde ...
On smaller screens like mobile devices, I am having trouble increasing the font size of the navigation bar menu items. While it displays well on desktop screens, the font size becomes very small and difficult to read when the screen collapses to a mobile v ...
Utilizing Bootstrap to practice coding as a beginner has been a learning process for me. Recently, I encountered an issue with the container size of the footer. view image description here Upon inspecting the photo in the link, I realized that the foote ...
My inquiry pertains to a CSS layout. I currently have 3 divs positioned in a horizontal line next to each other, as depicted below... div1 div2 div3 I am aiming for the divs to reorganize themselves as the screen size decreases. In one scenario, they sho ...
The JavaScript code goes as follows: var receivedamt = parseFloat($('#cashRecText').val()).toFixed(2); console.log(receivedamt); var addon = parseFloat('5.00').toFixed(2); console.log(addon); addon = parseFloat(receivedamt).toFixed(2 ...
While utilizing the Foundation 4 framework, I've encountered an issue where the margins are being overridden by the framework's default settings. This situation forces me to use the !important keyword to apply margins to specific elements. Below ...
I am in the midst of designing a webpage with a main div that is 1000px by 1000px. Within this main div, there is a horizontal bar located at the top, divided into four sections - each occupying 1/4 of the space. In the center of each section, there is tex ...
Can someone please help me understand how to create a custom Bootstrap class that applies to a specific breakpoint? I've tried using w-md-50, w-sm-100, w-lg-75 for a form, but it doesn't seem to be working for the targeted breakpoint. Are there a ...
Can you explain why there is a gap between the top of the green box and the browser window in Chrome and Firefox? I've tried various CSS configurations to eliminate the apparent space between the html and body elements, but it seems that some padding ...
In GWT, a personalized logging area can be created by implementing a HasWidgetsLogHandler. In my situation, I am using a VerticalPanel. However, the logging output is too wide and distorts the rest of the page. How can I wrap the lines? Each log entry add ...