Currently, I am working on a mobile responsive web design using Twitter Bootstrap 3, and I am facing challenges with margins and resizing.
I previously asked about creating a mobile-first responsive web design along with responsive images, which you can find here: mobile first responsive web design and responsive images questions
The website is an ecommerce platform that displays a list of products, with each product represented as a panel. In HTML, each panel contains a square that fits in the layout, making each page a sequence of panels.
The application is live at:
ISSUES: When viewing the site on a mobile phone in landscape mode, I want to see two columns side by side instead of one in portrait mode.
To achieve this, I have used CSS media queries in my 'rosposhop.css' file:
/* Product box (containing image) */
.pb {
position:relative;
display:inline-block;
text-align:left;
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-device-width : 480px) and (orientation: portrait) {
.pb {width:100.0%;}
}
/* Smartphones (landscape) ----------- */
@media only screen and (max-device-width : 480px) and (orientation: landscape) {
.pb {width:49.718572%;}
}
My approach was to adjust the width of each panel based on the viewport size, aiming to reduce it from 100% to 50% in landscape mode.
However, I encountered some pixel gaps between each panel despite using a specific fractional value for width adjustment:
.pb {width:49.718572%;}
This resulted in unwanted margins on the left and right of the viewport, which I tried to remove using the CSS `calc` directive without success:
.pb {width:calc(50% - 3px);
Any suggestions on how to eliminate these 1-pixel margins?
Another challenge I faced is adjusting the horizontal and vertical gaps between the divs while utilizing Bootstrap 3. How can I decrease the gap to 1 pixel? Your guidance would be highly appreciated.
Apologies for my limited knowledge in CSS, as I primarily focus on backend development.
Giorgio