I have designed this webpage layout using Bootstrap.
Although I have manually added margin between the rows, I now want to include vertical spacing between the columns when the page is resized.
Can anyone help me achieve this?
Full-size browser:
Resized browser:
Here is the code snippet:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
...
Thank you for your assistance!
Consider using a media query similar to the following example:
@media (max-width:768px) {
.header-section > div {
padding-top:20px;
}
}
Alternatively, if it fits the design better, you can target the sidebar class:
@media (max-width:768px) {
.sidebar-content {
padding-top:20px;
}
}
Take a look at this BootplyDemo
Why not just apply a margin-bottom: 30px to your widget class and remove it from the rows?
.widget-body {
margin-bottom: 30px;
}
.widget-white {
background-color: #fff;
}
.container-fluid {
background-color: #eee;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row top-buffer">
<!-- VISITORS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">VISITORS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of unique visitors to your website"><small>?</small></span>
<br />
<span class="single-number-md">4,700</span>
<small>visitors</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">10%▲</span>
<div class="chart" style="height:105px;" id="visitors-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- TRIALS IN PROGRESS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">TRIALS IN PROGRESS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of trials in progress"><small>?</small></span>
<br />
<span class="single-number-md" data-toggle="counterup">235</span>
<small>trials</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">7%▲</span>
<div class="chart" style="height:105px;" id="trials-in-progress-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- NEW CUSTOMERS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">NEW CUSTOMERS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of new customers acquired this month"><small>?</small></span>
<br />
<span class="single-number-md">56</span>
<small>customers</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">2%▲</span>
<div class="chart" style="height:105px;" id="new-customers-chart"></div>
</div>
</div>
<!--/col-md-4-->
</div>
--- (remaining code snipped for brevity) ---
</div>
<!--container-fluid-->My code generates an HTML file, but when there is a large amount of text, the file can exceed 50mb, sometimes reaching 70-80mb. I prefer to avoid having an HTML file of this size. Below is the source code defining an HTML template: namespace Structure { ...
As a web developer, I am aware that images cannot simply be copied from a local machine and pasted into a website - they must be uploaded. I have experience with wysiwyg tools like TinyMCE and FCKEditor, but my client is frustrated about not being able to ...
Currently, I'm facing two issues that I need assistance with: On smaller screens, the search bar drops out of the navbar collapse inexplicably, and I'm struggling to identify the cause. The width of the search bar seems to be overriden by A ...
Whenever I use ckeditor, I find that pressing enter results in two <br /> tags being inserted. While I want to keep the line break tags, having them appear twice is not ideal. In my config.js file, I have set the configuration for the enter key as f ...
I'm having trouble loading an image into a canvas using the drawImage function. Additionally, I've implemented drag functionality but found that when moving the image inside the canvas, it doesn't follow the mouse cursor in a linear manner. ...
To retrieve a price value from an HTML table based on a specific column and header, follow these steps: Here is how the table is structured: https://i.sstatic.net/UM3MA.png The HTML code appears as follows: <input id="search_height" placeholder= ...
When using Cakephp to generate a link with Html->link, the code looks like this: echo $this->Html->link('Download',array( 'plugin'=> 'galleries', 'controller'=> 'galleries', 'a ...
Is there a way to close my popup? function hidePopup(){ document.getElementById("popup-1").classList.remove("active"); } @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); .popup .overlay{ positio ...
I am new to CSS and I have a question regarding design. I want to create a form in the center of my webpage (shown as the black box) with a white background that overlaps the body background (represented by the red lines). For reference, please view this ...
Currently, we are in the process of developing a code that involves marking table rows using HTML5 local storage and jQuery. Below is the initial code snippet... $(document).ready(function () { $('table tbody tr').click(function() { ...
I have replaced the regular upload input + submit button with an icon. My goal is to automatically start the upload process when a file is chosen by the user. However, currently nothing happens after the file selection. <form action="upload.php" method ...
I am struggling to achieve different font sizes, colors, and weights for top and sub-menu level links in my simple jQuery vertical accordion. Despite changing the CSS, I can't seem to get it right. What am I missing? Is there an easy way to accomplish ...
Despite trying all available codes, I have been unable to make it work. Here is the code: <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta na ...
Is there a way to showcase a list of information from a web host on a Windows sidebar gadget without using iframes? I've heard about using JavaScript AJAX (XmlHttpRequest) for this purpose, along with a refreshing function. Can anyone provide some gui ...
Need help with iframe content retrieval $('.theiframe').load(function(){ var content = $(this.contentDocument).find('pre').html(); } I'm facing an issue where the iframe content is retrieved properly in FF, Chrome, and IE 8,9 ...
Currently, I am working with a code snippet that displays two images, each approximately 350px wide. These images are being shown in a sidebar that is set at 400px wide on desktop and tablet screens (col-lg, col-md, col-sm), but expands to 100% width on a ...
I am looking to track the daily minimum and maximum prices of shares for various companies. Currently, I'm attempting to utilize this tag: <input type="number" name="number" placeholder="minprice"> <input type="number" name="number" place ...
I have extracted the text from the Name column of an HTML table using XPATH, which corresponds to column index [1]. Now, I need to navigate to the 3rd column with index [3] using XPATH, but I'm not sure how to proceed. Here is my current XPATH: //ta ...
Showcasing the grades in a table format: username assignment weight mark a a1 10% 50% b a1 10% 60% Can this be achieved using PHP/HTML? <div class="a"> <div class="divTabl ...
I am currently working on integrating a PHP code with a Python script (ring.py) and I need some help resolving an issue. <?php echo '<p>Hello World</p>'; $output = exec('python ring.py'); ?> The python scrip ...