Ensuring Content Alignment to the Left in Mobile View with BootStrap Rows

I'm in the process of building a website using Bootstrap.

When viewing the webpage on desktop, everything looks great. However, when I switch to mobile view, the cards are not displaying as I would like them to.

In mobile view, the cards are aligned to the left side of the screen. I want them to be centered instead.

Below you'll find images showing the issue, along with the code that controls the cards:

Desktop View: https://i.sstatic.net/XufKt.png

Mobile View: https://i.sstatic.net/il60j.png

Card Code:

<h3 style="padding-left: 8%; padding-top: 2%; font-family: 'Verdana';">Your Listen Later</h3>
<div class="row" style="padding-left: 7%;">
    {% for i in watch reversed %}
    <div style="padding-left: 2%; padding-top: 1%;">
        <div class="card" style="width: 18rem;">
            <img src="{{i.image}}" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">{{i.name}}</h5>
                <p class="card-text" style="color: green;">Tags: {{i.tags}}</p>
                <p class="card-text" style="color: green;">Movie: {{i.movie}}</p>
                <a href="/musicbeats/songs/{{i.song_id}}" class="btn btn-outline-danger ">Listen Song</a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
htmlcssbootstrap-4

Answer №1

To achieve symmetrical spacing, consider adding equal paddings to both the left and right sides of the .row. Then, make the div before the .card full-width and apply the same side paddings again:

<h3 style="padding-left: 8%; padding-top: 2%; font-family: 'Verdana';">Your Listen Later</h3>
  <div class="row" style="padding-left: 7%; padding-right: 7%;">
    {% for i in watch reversed %}
    <div style="padding-left: 2%; padding-right:2%; padding-top: 1%; width:100%">
    <div class="card" style="width: 18rem;">
      <img src="{{i.image}}" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">{{i.name}}</h5>
        <p class="card-text" style="color: green;">Tags: {{i.tags}}</p>
        <p class="card-text" style="color: green;">Movie: {{i.movie}}</p>
        <a href="/musicbeats/songs/{{i.song_id}}" class="btn btn-outline-danger ">Listen Song</a>
      </div>
    </div>
  </div>
  {% endfor %}
  </div>

Instead of using percentage-based paddings and inline styles, I suggest exploring Bootstrap's Grid system to better utilize containers, rows, and columns for a more structured layout.

Answer №2

Check out the snippet below:

<h3 style="padding-left: 8%; padding-top: 2%; font-family: 'Verdana';">Your Listen Later</h3>
<div class="container">
    {% for i in watch reversed %}
    <div class="row mx-auto">
        <img src="{{i.image}}" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">{{i.name}}</h5>
            <p class="card-text" style="color: green;">Tags: {{i.tags}}</p>
            <p class="card-text" style="color: green;">Movie: {{i.movie}}</p>
            <a href="/musicbeats/songs/{{i.song_id}}" class="btn btn-outline-danger ">Listen Song</a>
        </div>
    </div>
    {% endfor %}
</div>

I've included a new <div> with a class of container and modified the existing <div> within the loop to have classes of row and mx-auto.

The use of the Bootstrap class container indicates that this is where the main content of the website will be housed. Within this container, grid classes like rows and columns will be utilized.

Since you're aiming for one item per row, the columns class is not necessary for the <div>; each entry will have its own individual row.

The Bootstrap class mx-auto will center the image by setting the left and right margins to auto.

However, please note that this solution is optimized for mobile view only. Refer to this resource on adapting styles based on device size: Change Styles based on Display Size.

Ensure you incorporate the ability to switch layouts based on screen size. I typically achieve this using PHP, adjusting code or styles based on the current viewport size.

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

Tips for ensuring an element stays anchored at the bottom even when the keyboard is displayed

I recently encountered a situation on one of my pages where an element positioned at the bottom using absolute positioning was causing issues when the keyboard was opened, as it would move to the middle of the page unexpectedly. While this may seem like a ...

javascripthtmlcssreactjs

What is the reason for the gap between the bottom row and the one above it?

Using bootstrap to create a table and my code is as follows: <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ...

htmlcssbootstrap-4

Stopping the <nav> element from displaying as "unlabeled section" on HTML5 webpages

As I work on incorporating proper sectioning in HTML5 with sectioning elements and headlines to meet my customer's design goals (while adhering to certain restrictions), I have encountered a challenge. The basic layout requested is as follows: <b ...

htmlnavigationsemanticsnav

When running the function `.find('li')` on a `bs4.element.Tag` object, it returns None despite the presence of the <li> tag within the soup

As I work on parsing the content of a URL using BeautifulSoup after making a request with `requests.get()` (not displayed in the code), I am using the parser ""html.parser"". Below is a snippet from a larger script: print(f"subheading : {sub ...

pythonhtmlpython-3.xweb-scrapingbeautifulsoup

The meter.value update feature is functioning properly, however, it does not refresh the displayed "hover" value

When using JavaScript to update a meter's value, I encountered an issue: var LFRMSMeter = document.getElementById("LFRMSMeter"); LFRMSMeter.value = parseFloat(j[0]); Although the updating of the value works fine, hovering over the meter displays the ...

javascripthtml

Tips for displaying and hiding content in Angular2

I have a component that toggles the visibility of elements by clicking a button. This is the snippet of my HTML code: <div *ngFor="let history of histories | sortdate: '-dateModified'"> <p><b>{{ history.remarks }}</b& ...

htmlangular

How can I customize index.html to display specific elements for different users?

My goal is to serve different users with a customized index.html page, where certain elements like buttons are only visible to specific users. I am utilizing the Express framework and familiar with registering views to control access to entire web pages ...

javascripthtmlnode.jsexpressnpm

Remember to follow the camel case convention when utilizing element.tagName(String) with jSoup

Looking to change the name of an HTML tag using Jsoup in the following way - element.tagName("p:panelGroup"); But when I run this code, the output changes the case and I end up with p:panelgroup. Is there a method to preserve the camel case in the resul ...

htmljsoup

The arrow in the dropdown menu is missing

I recently came across this code snippet in a Boostrap 4 website: <div class="btn-group mb-2 mr-2"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" cl ...

bootstrap-4drop-down-menu

Incorporating a spontaneous color element into formatting text links with Jquery

Looking to add some flair to my website by styling all text links with a random color using jQuery. I've been able to generate the random color variable, but struggling to integrate it into my CSS stylesheet or create a script that applies the color t ...

jquerycssvariablesrandom

Set the minimum width of CSS headers <h1, h2, h3> to align next to a floated image

I am dealing with a layout issue where headlines should be displayed next to floated images if there is enough space, and drop below the images if not. Unfortunately, I do not have access to the HTML code, so I need to solve this problem purely through CSS ...

cssresponsive-designmedia-queries

Ensure that data is not cached after the page is refreshed at regular intervals of x seconds

In the process of developing a news app, I have implemented a feature where a div with the class .new_feed is refreshed every 10 seconds to fetch new updates. However, I encountered an issue where if a new feed appears in the .new_feed div and is not cli ...

javascriptjqueryhtmlajax

Using the Croppie plugin to crop an image before uploading via jQuery Ajax in PHP

I've successfully implemented a code snippet that allows image cropping using PHP, jQuery, and Ajax with the Croppie plugin. Currently, I'm facing an issue while trying to include additional input values along with the image upload process. I ...

javascriptphpjquerycssajax

Adjusting print page size according to the class of a specific element using CSS

I am currently working on a single page application and I have the need to print the page with either landscape or portrait orientation based on the class of a specific div element. The challenge is that I want to achieve this using only CSS and without an ...

htmlcss

Using jQuery and Modernizr for CSS3 and Javascript transitions support in Internet Explorer

Looking for a way to add support for button hover effects in IE 7-9 on this Codepen.io project. Can anyone help? For example, I'm trying: transition-duration: 0.5s; transition-property: all; transition-timing-function: ease; margin-top: 5px; I atte ...

jquerycsscss-transitionsmodernizr

Updating a Pandas Column in Python Using a for Loop

My lack of experience with web scraping is definitely showing as I am relatively new to this. The goal of my code is to scrape all the data from a webpage, which it does successfully. However, before the loop continues, I want pandas to write the current p ...

pythonphphtmlselenium-webdriverweb-scraping

Shifting and positioning the card to the center in a React application

I am currently constructing a React page to display prices. To achieve this, I have created a Card element where all the data will be placed and reused. Here is how it appears at the moment: https://i.stack.imgur.com/iOroS.png Please disregard the red b ...

javascripthtmlcssreactjs

Adjust the size of both the right and left price scales on TradingView Lightweight Charts

Is it possible to set a fixed width for both the right and left price scales on a chart? Let's say, 50 pixels for the right price scale and 70 pixels for the left price scale? For a working example, please visit https://jsfiddle.net/TradingView/cnbam ...

javascriptcssscaletradingview-apilightweight-charts

What is the best method to position this div above the other div?

I am facing a challenge in positioning one div above another in Bootstrap. Inside a parent div, I have two child divs - one with an image and the other with text. Despite trying various methods like adjusting margins using CSS, I cannot seem to get the de ...

htmlcssbootstrap-4

Exploring the use of color in text embellishments

Is it possible to change the color of the underline on text when hovering, while keeping it different from the text color? I have successfully achieved this in Firefox using the property "-moz-text-decoration-color". However, this does not work in other m ...

htmlcss