Troubleshooting padding problem in mobile gallery view with Bootstrap

Having a problem with the gallery layout in Bootstrap. It looks great on desktop view, but on mobile, there's no space between images on the same row.

On mobile, the images stack vertically without any spacing between them within a row. However, there is spacing between groups of four images that would be displayed on larger screens. I think the issue lies in my CSS, and the code snippet below should address it.

#rowpadding{
margin-bottom: 20px;
}

View the gallery template here. Also, check out my JSFiddle to see the problem in action.

htmlcssmobile

Answer №1

If you apply the following CSS code, your issue will be resolved:

.container .row {
margin-bottom:0px!important;

}

.portfolio-item {
margin-bottom: 25px;

}

Just a friendly reminder, avoid using identical IDs on the same page. Please remove the ID 'rowpadding'.

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

What is the best approach for maximizing user experience: setting a maximum screen width or allowing for auto-width?

I manage a blog with responsive design that adjusts to the width of the screen. The majority of our blog posts consist of lengthy content, often reaching over 1000 words, along with user comments. My main concern is about the reading comfort and usability ...

htmlusability

Issues with HTML formatting in PHP emails

I am sending an approval/disapproval email to a user. I want to include a button in the email so that when the user clicks it, they can approve or disapprove the request. However, I am facing an issue as I cannot see the button in the mail when I receive ...

phphtml

Horizontal rule located within a table but spanning the entire width

I wrote the following code: <table> {item.awards.map((obj,i) => <tbody> <tr> <td>Name</td> <td>:</td> <td>{obj.title}</td> </tr> ...

javascripthtmlcssreactjs

Is there a way to utilize local resources in case CDNs are unable to load properly?

Encountering an issue with Bootstrap and jQuery loading from CDN, sometimes failing to import from the CDN source. For instance: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYii ...

javascripthtml

Using array.map() in React does not display elements side by side within a grid container

I'm currently working with React and material-ui in order to achieve my goal of displaying a grid container that is populated by an array from an external JavaScript file. The challenge I am facing is getting the grid to show 3 items per row, as it is ...

javascripthtmlreactjsmaterial-ui

What causes an :before content element positioned absolutely to exceed the boundaries of its parent when set as an inline element?

Check out this CodePen: https://codepen.io/jossnaz/pen/BMwpjR HTML <br> <div class="" style=" "> <span class="" style=""> Lorem ipsum nunc hendrerit imperdiet aliquet class massa suspendisse libero, enim condimentum himenaeos h ...

htmlcss

The connection of <p:ajax> to a parent component that is not a ClientBehaviorHolder is not possible

Trying to trigger a function when selecting a value from a dropdown. See the code below: <h:form id="frmUpload" enctype="multipart/form-data"> <p:column><h:outputText value="Select Team: " /></p:column> <p:colu ...

javahtmlajaxprimefacesdrop-down-menu

Angular's Spanning Powers

How can I make a button call different methods when "Select" or "Change" is clicked? <button type="button" class="btn btn-default" *ngIf="!edit" class="btn btn-default"> <span *ngIf="isNullOrUndefined(class?.classForeignId)">Select</spa ...

htmlangulartypescript

How to Show Byte Array Image in AngularJS HTML Using a Web API Service

I am in the process of developing an AngularJS Application and for my service, I am utilizing .NET C# for coding purposes. I am currently following the code structure outlined in a previous post about loading images from a C# Byte array and placing them in ...

c#htmlangularjsimagearrays

Transitioning in Vue.js can be triggered by changing a value up or down

My current transition block component is set up like this: <div v-if="!surveyResultIsReady" class="vh-md-40 position-relative" > <transition name="custom-classes-transition" enter-active-class="animated slideInRight" ...

javascriptcssvue.jsvuejs2vue-transitions

Tips for preventing page breaks (when printing or saving as a PDF) in lengthy HTML tables

Here is the link to a single HTML file (including style and scripts): FQ.html The problem I'm facing can be seen in this image: https://i.sstatic.net/Nr4BZ.png I've tried several solutions, the latest of which involves the following CSS... @me ...

javascripthtmlcsspdfpage-break

An innovative approach to loading tabs dynamically using Materialize CSS

I have a situation where I am dynamically generating a set of tabs when the page loads, but for some reason the on function is not recognizing it. How can I fix this issue? Here is the current code: HTML <div class="row"> <div class="col s12 ...

jquerycss

When multiple checkboxes are selected, corresponding form fields should dynamically appear based on the checkboxes selected. I attempted to achieve this functionality using the select option method

Require checkboxes instead of a selection option and have multiple checkbox options. Depending on the checked checkboxes, different form fields should appear. A submit button is needed. I have included some CSS code, but a more detailed CSS code is requir ...

javascripthtmlcssforms

Move the div in an animated way from the bottom of the screen to the right

I am facing an issue with the image animation in my project. Currently, the image moves from the bottom to the left corner, but I want it to move from the bottom to the right corner instead. I have attempted using the transform translate property to achiev ...

css

Alter the color of textbox text using JavaScript

I have a text input field. When clicked, I want to change the text color style using JavaScript. Previously, I successfully achieved clearing the inner content of the textbox when clicked and reverting to the default version on blur. This code is currently ...

javascripthtmlcsstextbox

The Outer Div Can't Contain Google Maps

I am currently working on integrating a map widget into a dashboard I created using gridstack.js. The sample widget layout that I am aiming for can be seen in the link below: https://i.sstatic.net/ZQP6G.png My goal is to embed the map within the inner (w ...

javascripthtmlcssgoogle-mapsgridstack

Incorrect positioning of dropdown menu when using Bootstrap 4 and translate3d() function

Having multiple bootstrap 4.4.1 dropdown menus, each within a column which is functioning correctly except for the position calculation. Example of HTML col: <div class="container"> <div class="row"> <div class="col"> <div ...

htmlcssdrop-down-menubootstrap-4

Align a collection of images in a grid format on the center of the page with

I am trying to center a div that contains multiple 145px X 145px thumbnail images without setting a fixed width. The goal is to have as many images in each row as the browser window can fit. However, I want to keep the images left-aligned within the center ...

javascripthtmlcssdynamiccenter

Different ways of manipulating images with JavaScript

I attempted to tackle the issue independently, but I'm stumped. Is there a way to adjust the width of an image in JS when the screen dimensions are changed? ...

javascripthtmlimagewidthscreen

Preloading and rendering an image onto a canvas in a Vue single-page application is not functioning as expected

I am working on a Vue 3 SPA where I am manipulating canvas elements. To preload my image, I am using the function provided below: async preloadLogo () { return new Promise( (resolve) => { var logo_img_temp = new Image(); const logo_s ...

javascripthtmlvue.jscanvas