I am having difficulty creating an image grid with consistent spacing between columns, like shown in the image below:
https://i.sstatic.net/azsxa.jpg
The issue I am facing is aligning the right margin (red line), as illustrated below:
https://i.sstatic.net/E6nOu.jpg
Here is the JSfiddle link for reference: https://jsfiddle.net/castordida/0zy7qd5m/
<div class="container gridhome mt-5 mb-5 p-0">
...
</div>It appears that the issue is caused by a gap between your image on the right, which is not accounted for by the fixed height...
There are several ways to address this problem...
Option 1: https://jsfiddle.net/y0x7kpza/
Try adding an overflow:hidden property to the first .row element.
Option 2: https://jsfiddle.net/d0a52xwk/
Adjust the heights of the two divs on the right while considering the margin-top of these elements.
.h-50-bis{
height:calc(50% - 0.125rem);
}
Hey there! I'm currently in the process of building a Netflix clone, and everything seems to be working well except for one issue with the layout. No matter how I adjust the width of the div containing the images, they just won't change size. I&a ...
Trying to master the art of using Bootstrap 4 has been quite a journey. At first, everything seemed to work smoothly as I attempted to horizontally center some text within a full-sized jumbotron. However, things took an unexpected turn when I decided to im ...
Here is the HTML snippet I am working with: <div class="parent"> <div class="child"></div> </div> The corresponding CSS styles are as follows: .parent { position: fixed; } .child { position: fixed; left: ...
I need help creating a button that will copy a specific text to the clipboard when clicked. <button onclick="copyToClipboard('A\B\C\D')">Click here</button> However, I've encountered an issue where the text copie ...
I'm a newcomer to Javascript and I am currently experimenting with it. While browsing through a tutorial on w3schools, I came across an example of changing the color of a button after clicking on it. My idea was to take it a step further by loading a ...
I attempted to add a sticky background to a div, which was successful. However, I am encountering an issue where the background does not stretch enough during scrolling. Below is the CSS code I used to apply the background, along with screenshots displayin ...
My website is currently built using PHP and allows users to add and view documents. The current upload process is basic, requiring users to manually input information and then view the document with minimal formatting on a webpage. I am looking to upgrade ...
Every time I navigate to www.reddit.com and enter a query in the Search field, then press enter to go to the first valid link within a subreddit, sorting options are presented. By default, it is set to BEST but I wish to change it to TOP. My test class cod ...
I'm in the process of designing a Wordpress theme, but I've hit a roadblock. I'm utilizing the theme customize page to upload both a main logo and a mobile logo, which should then be displayed on the page. Initially, it was working for about ...
My current project involves integrating a custom widget into users' websites for my application. I am considering using an iframe as it seems to be the most efficient option for several reasons: Utilizing the custom framework of the application will ...
After researching multiple stack overflow questions and attempting various solutions, I still haven't been able to resolve my issue. Please refrain from marking this question as a duplicate. The problem I am facing is that my dropdown menu is not ap ...
body>div { background-color: red; } <div>Additional content here</div> Looking for assistance in achieving a similar background to the one on the bootstrap main page. I attempted using a gradient, but was unable to achieve the desired re ...
Currently, I am working on creating a custom bootstrap menu that displays properly on an iPad screen size. I have implemented the standard navbar code from Bootstrap with a few tweaks. While it works well on smartphones and laptops, the issue arises when ...
Is there a way to lock the copy button on my site without restricting the save as button, which is activated by right click? I want users to be able to save the website as an HTML file, but prevent them from copying text. Can this be achieved using Javas ...
Having an issue with this code snippet where nothing is being added. It seems like the variable result may not be taking a number or something else, but I'm not entirely sure why. $(document).ready(function () //document.getElementById(1).style. ...
I'm having trouble printing the associative array after inserting data from an input box. Currently, I can only display the latest data entered in the input box. What I really want is to continuously add data to the array and display it every time new ...
Currently, I'm in the process of developing a website using WooCommerce, WordPress, and Elementor. I've encountered an issue where only one word appears on each line and have tried various solutions such as hyphens, word-break, and line-break wit ...
I am currently in the process of developing an ASP.NET application using themes. I have successfully assigned a theme to the application via the web config file. One issue I am facing is trying to reference a bookmark icon located within the themes direct ...
Could someone help clarify the distinction between these two types of CSS declarations: ul#test { } #test ul { } Despite my searching, I am unable to pinpoint the difference, but they exhibit different behaviors when implemented on a test page. To me, i ...
Recently started experimenting with button styles and I wanted to create a design where there is a background image on the left of the button with text located on the right side of the image. Here's the code snippet I've been working on. Here&apo ...