On the lower half of the page, I have three divs named (vd-grid-sub-box). I am attempting to equalize the gaps between each of these three divs. Currently, there is a larger gap between the 2nd and 3rd div compared to the 1st and 2nd.
However, every time I try to close this gap by adjusting their margins, it ends up pushing the third one down off the page or pushes the right column out (vd-grid-right-col), and I cannot use Bootstrap.
To ensure equal width distribution among the three divs in a row, you only need to assign a specific width to one of the divs. I recommend setting the width to "33%" which results in each div occupying 33% of the total width, thus filling up the entire row with minimal gaps. Using flexbox can simplify the process significantly.
.vd-grid-sub-box {
width: 33%;
height: 185px;
background-image: url(../img/granda_hj.jpg);
background-size: cover;
background-position: top center;
background-color: #000029;
float: left;
padding: 0.9%;
margin-right: 0.5% !important;
margin-left:0 !important;
margin: 0 0 1% 0.2%;
box-sizing: border-box;
}
.vd-grid-sub-box:last-child{
margin-right: 0 !important;
}
I have a flex row with 2 divs (.box-1 and .box-1) both containing some content. I want them to remain in the same row until the content in .box-1 becomes long enough to push .box-2 to the next line. .box-2 Should have a fixed width on desktop screens. S ...
In my Angular application, I have a navigation bar at the top that sticks in place (position: sticky; top: 0;). Beneath the navigation bar is the content, which includes Angular material components such as mat-buttons or mat-cards. The issue arises when ...
I'm trying to adjust the height of a wysiwyg editor housed within a panel to be 200px. How can I achieve this? <div class="row"> <div class="col-xs-12 col-md-12 col-lg-8"> <panel heading="Product Des ...
I'm having trouble with my footer always being covered by dynamic content on my page. How can I adjust the CSS to make sure the footer stays at the bottom and adjusts to the size of the content? Here's the current CSS code for the footer: div ...
As I delved into the material-ui documentation, I came across an interesting snippet: Various components in Material-UI make use of z-index, a crucial CSS property that aids in organizing content along a third axis. Material-UI employs a predefined z-in ...
Example Link On smaller screens, the bootstrap navbar menu does not collapse by default when clicking on a menu item. To fix this issue, I added attributes data-toggle="collapse" and data-target="#navbar-collapse" to each menu item so that the menu will ...
Hey there, I'm just starting out with CSS and I might have some beginner questions. I want to add a line break at the top of my post before and after my h1 tags. I may be going about this the wrong way. It's possible that I need some padding at t ...
Having trouble with a blurry pop-up form when clicking the button? Check out the code I've used below: <button class="btn btn-default" data-toggle="modal" data-target="#myModal">ENQUIRE NOW</button> ...
As the creator of the stackoverflow-readme-profile project, I dedicated extensive time and effort to crafting a personalized Stackoverflow profile in the form of an SVG image. Utilizing "native svg tags," I meticulously constructed elements such as: < ...
Working with Bootstrap 3, a custom div has been created as shown below: <div class="second-para"> <div class="container"> <div class="second-section"> <div class="c ...
I am looking to utilize swig (my chosen templating engine) for incorporating JavaScript code that will only display when the user selects the 'other' option from the select menu. <div class="form-group"> <select class="custom-select"&g ...
Here is the code that I have: <label>Brand</label></br> <select name="brand" id="brand" onChange="changecat(this.value);"> <option value="" selected>Select Brand</option> <option value="A">AMD</option&g ...
I have two programs, test.html and test.php test.html: <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js" ...
My task is to create a popup that includes questions and video responses. The challenging aspect for me is how to ensure each question displays a different video in the same location. Additionally, when the user first opens the popup, the initial question ...
In my form, there is a field called 'Protein Change' that includes a multi-level dropdown. Currently, when a user selects an option from the dropdown (for example, CNV->Deletion), the selection should be shown in the field. However, this funct ...
Two different functions were created using jQuery. The first function, table(), loops through an object from JSON response in a jQuery Ajax success and then calls the second function, column(), with a parameter being an element of the array from the object ...
I have the following code in a popover template: <ion-popover-view class="customPopup"> <ion-header-bar class="bar bar-header barHeaderCustom"> <h1 class="title">{{ 'AVAILABLE_SOUNDS' | translate }}</h1> </io ...
My header has a fixed height of 50px. Within the body of my page, there are numerous anchor links. However, when I click on these links, the anchored content appears underneath my fixed header, causing me to lose 50px of visible content (requiring me to sc ...
I am trying to achieve a unique effect where a gradient appears on the text instead of the background of an image. An example I created can be found here: https://codepen.io/BenSagiStuff/pen/BaYKbNj body{ background: black; } img{ padding: 30px; ...
As a newcomer to development, I am currently experimenting and creating a sample dashboard. However, I am facing an issue where the sidebar value does not display upon loading the page. I have to manually click on a list in my sidebar for it to appear. Th ...