Why is my text becoming centered on desktop view?

One curious issue I encountered while working with Bootstrap 4's accordion on this page is that the text of the last item in the accordion is mysteriously centered. Despite not using text-center or having any CSS properties like text-align: center specified, the text remains centered only on mobile devices and not desktop screens.

https://i.sstatic.net/J1oBi.png

Here's a snippet of my code:

.accordion-faq .card {
  border-radius: 0;
  border: 1px solid #F1F5F7;
  border-right: none;
  border-left: none;
  text-align: left;
}

/* Rest of the CSS code... */

}
<!-- Bootstrap CDN -->
<!-- Links to external CSS files... -->
<!-- Accordion structure within HTML -->

htmlcssbootstrap-4

Answer №1

One reason why this issue may be happening is due to the button having its text aligned in the center. If you remove this styling from your stylesheet, the button will naturally align its text in the center. The reason why you may not notice this happening with other elements is because those buttons are not as wide as their h5 containers.

To better understand what I am explaining, try adding the following:

.btn {
    width: 100%
}

If you add this to your button class, you will see all buttons align their text in the center, not just the last one. By setting a width of 100%, there is more space for the alignment to take place.

The main reason why you only notice this alignment issue when the text wraps is because the button's width matches that of the h5 "container." However, once the text wraps around, there is more room for the alignment to occur.

To resolve this issue, consider adding the following:

.btn {
    width: 100%;  /*Optional*/
    text-align: left;
}

This can help ensure that certain elements do not align their text in the center unintentionally.

Answer №2

That's the .btn class from the Bootstrap framework. You'll need to customize the text-align property.

.accordion-faq .card {
  border-radius: 0;
  border: 1px solid #F1F5F7;
  border-right: none;
  border-left: none;
  text-align: left;
}

.accordion-faq .card-header {
  background-color: white;
  border-bottom: none;
}
....(the rest of the CSS code)....

@media (max-width: 992px) {
  .accordion-faq,
  .accordion-faq .card-header,
  .accordion-faq .card-body {
    text-align: center !important;
  }
  .accordion-faq .card-header h5 button::after {
    display: none;
  }
  .accordion-faq .card-header h5 button[aria-expanded="true"]:after {
    display: none;
  }
}

.accordion-faq .card-header .btn {
  text-align: left;
}
...(More HTML and CSS code)...

Answer №3

Great

@media (max-width: 992px) {
  .accordion-faq,
  .accordion-faq .card-header,
  .accordion-faq .card-body {
    text-align: center !important;
  }
  .accordion-faq .card-header h5 button::after {
    display: none;
  }
  .accordion-faq .card-header h5 button[aria-expanded="true"]:after {
    display: none;
  }
}

Check out the demonstration here:

https://i.sstatic.net/xD86y.png

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

Demonstrating various elements within an application using Vue3

I created two components and attempted to display them in a Vue 3 application. Here is my HTML code: <div id="app"> <image_preview> URL: [[image]] </image_preview> <file_uploader> Counter:[[coun ...

javascripthtmlvue.jsvuejs3

Sibling proximity: an excess of elements separating the regulations

Is there a way to make a hidden p element appear when hovering over the first visible element in a tree structure? I found some help on Stack Overflow suggesting the use of adjacent sibling selectors, and while it works well with a simple example, it fails ...

htmlcsshoverhidesiblings

Styling pagination using CSS and jQuery

I am looking to display 3 sections in a simple, paginated way that mimics tabs. I am trying to implement the logic where when a pagination item is clicked and has the 'active' class, it should show the corresponding block. However, I am strugglin ...

javascriptjqueryhtmlcsspagination

Having trouble integrating an HTML template using JavaScript

I am currently attempting to integrate the HTML code of my website using data-prototype: <div id="accordion" data-prototype=' <div class="card-body"> <textarea id="solution_answers___name___content" name=& ...

javascripthtmljqueryckeditor

Using jQuery Ajax to Retrieve Inner Text from Elements

Looking for a solution with PHP file output like this: <div id="title">Add Us On Myspace!</div><img id="image" src="http://i39.tinypic.com/67jybs.png" alt="Add Us On Myspace!" /> The code to retrieve and display this is as follows... $ ...

jqueryhtmlajaxcss-selectors

Creating interactive buttons in Angular 2

I am currently in the process of coding my own website and I've run into an issue with a button. Here's the code I'm working with: <div *ngFor="let game of games" class=card"> <div class="card-body"> <h5 class="card-t ...

htmlangular

Trouble with Alignment in Bootstrap 3 Form

I'm currently facing an issue with aligning a form group in Bootstrap 3. My goal is to have them aligned vertically, but I am struggling to achieve this. Any help would be greatly appreciated! Please refer to the screenshot below for reference: Her ...

csstwitter-bootstrap-3

Sending data from an HTML textarea to a PHP variable without user input

After spending more than two days searching for a solution to this problem, I am now reaching out directly with my question. Although there have been some hints and partial answers, nothing has definitively resolved the issue I am facing, prompting me to m ...

javascriptphpjqueryhtmlcss

The property 'scrollHeight' is undefined and cannot be read

I've created a messaging system using javascript and php, but I'm facing an issue. When new messages are received or the chat log grows longer, it creates a scrollbar. The problem is that when a new message arrives, the user has to manually scrol ...

javascriptphpjqueryhtmlcss

Ways to incorporate the X-shaped spinner hamburger menu into your design

Hello everyone, I am looking to create a toggle menu that switches between X and hamburger styles when clicked. I have shared my menu codes below but I'm not sure how to achieve this effect. If anyone can help, I would really appreciate it. Here are ...

htmljquerycss

What is the best way to store a video file in a database?

Recently, I came across a task where I needed to insert a video in a database and display it using an HTML5 video control. Despite successfully saving the video in the database, I encountered an issue when trying to play the video. Upon investigating, I ...

asp.nethtmlvideo

What is the best way to adjust viewport settings for child components, ensuring the container size is set to 100vw/100vh for all children

Within my project, I have connected the react-static repository with the react repository using yarn link. "react": "^16.13.1" "react-static": "^6.0.18" I am importing various components from the react-static reposi ...

javascripthtmlcssreactjsviewport-units

The vertical writing mode is causing boxes to stack in an unexpected direction

I am encountering an issue with three div elements that have a writing-mode of vertical-rl. Despite setting the writing mode to vertical, the block stacking context is not being displayed from left to right as expected, but rather stacking inline. CSS .v ...

csstextlayout

Displaying data on View is not working after navigation

I'm facing an issue where the data is not displaying on the view after routing, even though it appears in the console. Surprisingly, if I don't change the view, the data shows up. Additionally, if I call the service directly from the view, I can ...

javascriptjqueryhtmlangularjsservice

The 'id' field was anticipating a numerical value, but instead received 'bidding'

When constructing a HTML page based on a model, I encountered an issue with a form that seems to be causing interference with the model being used for building the page. The error message I received is: Exception Type: ValueError at /bidding Exception Va ...

pythonhtmldjangoforms

Using Jquery to dynamically adjust the size of a div based on the width and height of the browser window

How can I dynamically change the height of a .test div based on the browser width and height? I want the value to update whenever the browser is resized. $(document).ready( function() { window.onresize = function(event) { resizeDiv(); ...

javascriptjqueryhtmlcss

What techniques can I use to ensure that my website's layout adjusts correctly when resized?

body { padding: 0; margin: 0; font-family: 'Roboto', sans-serif; font-size: 16px; box-sizing: border-box !important; } a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; text-decorat ...

htmlcssflexboxmedia-queries

Musical backdrop for an online game platform

Currently, I am working on developing a game using HTML. I am trying to figure out the best way to incorporate music into the gameplay. Any suggestions on how I can add music to my web-based game? ...

javascripthtmlaudio

When a user repeatedly clicks the "see more" button, they will continue to receive no results multiple times

I have created a partial view and added the rendering in the Index page. A button (See More) triggers an AJAX call to the controller each time it is clicked, appending new data to the screen. The issue arises when there are no results left to display, and ...

htmlajaxmodel-view-controllerrazorappend

Get the dropdown values after a successful return from a jQuery AJAX call

When using jQuery AJAX, I retrieve values from the database to populate a dropdown menu. The process involves sending an ID to fetch the level, and then using that level ID and name to obtain related values for the selected level, which are displayed in th ...

c#jqueryhtmlajax