Adjust the font size of the immediate child element that belongs to the fs-5 class

I have implemented a media query specifying the pixel value at which I want to apply a specific font size to all direct child elements (paragraphs) of the div. Within these paragraphs, there is one with the class=fs-5.

However, when viewing it responsively, the paragraph with that particular class remains unchanged.

Is there a way for me to override this?

.foots {
  background-color: #0000e4;
  top: -40px;
  right: 100px;
  height: 300px;
}

@media screen and (max-width: 950px) {
  .foots>p {
    font-size: 10px;
    height: 40px;
  }
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3818c8c979097918293a3d6cdd3cdd1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row position-relative">

  <div class="col-3 position-absolute foots text-white text-center p-3">
    <p class="fs-5">Other Lorem Stuff</p>
    <p> >Lorem ipsum dolor sit amet</p>
    <p> >Consectetur adipiscing elit</p>
    <p> >Aenean laoreet lectus nec risus malesuada auctor.</p>
    <p> >Vestibulum pellentesque</p>
  </div>

</div>

csstwitter-bootstrapbootstrap-4media-queriesbootstrap-5

Answer №1

To ensure your font-size style takes precedence, you need to specify !important. By default, all Bootstrap classes utilize !important, giving them priority over non-important classes and media queries.

.foots {
  background-color: #0000e4;
  top: 0px;
  right: 100px;
  height: 300px;
}

@media screen and (max-width: 950px) {
  .foots>p {
    font-size: 10px !important;
    height: 40px;
  }
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c0cdcdd6d1d6d0c3d2e2978c928c90">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row position-relative">
  <div class="col-3 position-absolute foots text-white text-center p-3">
    <p class="fs-5">Other Lorem Stuff</p>
    <p> > Lorem ipsum dolor sit amet</p>
    <p> > Consectetur adipiscing elit</p>
    <p> > Aenean laoreet lectus nec risus malesuada auctor.</p>
    <p> > Vestibulum pellentesque</p>
  </div>

</div>

Response to comment ~

You can target all p elements except the first child with this CSS:

@media screen and (max-width: 950px) {
  .foots>p:not(:first-child) {
    font-size: 10px !important;
    height: 40px;
  }
}

Here's an example of it in action:

.foots {
  background-color: #0000e4;
  top: 0px;
  right: 100px;
  height: 300px;
}

@media screen and (max-width: 950px) {
  .foots>p:not(:first-child) {
    font-size: 10px !important;
    height: 40px;
  }
  .foots>p:nth-child(1) {
    font-size: 15px !important;
    height: 40px;
  }
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99b96968d8a8d8b9889b9ccd7c9d7cb">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row position-relative">
  <div class="col-3 position-absolute foots text-white text-center p-3">
    <p class="fs-5">Other Lorem Stuff</p>
    <p> > Lorem ipsum dolor sit amet</p>
    <p> > Consectetur adipiscing elit</p>
    <p> > Aenean laoreet lectus nec risus malesuada auctor.</p>
    <p> > Vestibulum pellentesque</p>
  </div>

</div>

Answer №2

If you want all p fonts to be the same size throughout your website, you can simply remove the class="fs-5" and specify the font size in this manner:

p{
  font-size: --px;
}

Then, if you need certain elements to have a larger or smaller font size, you can adjust it as a percentage of the initial size. For instance, you may prefer your copyright statement at the bottom of each page (.foot text) to be slightly smaller:

.foot{
  font-size: 80%;
}

It appears that you were attempting to make the first paragraph stand out by using fs-5 for a lead-in effect. Bootstrap actually provides a built-in way to achieve this with the class="lead". Here is the documentation link for more information: https://getbootstrap.com/docs/5.0/content/typography/#lead

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

Issue with Bootstrap modal not dismissing when using click function

This is my custom function and div. When I click the function, it executes successfully but the modal window remains visible. <script type="text/javascript> $(document).ready(function () { $("#btnRespuesta").click(function () { //al ...

jquerycssajaxtwitter-bootstrap

Is it possible to use jQuery to apply CSS styling to a div that is dynamically called by Javascript

I currently have the following HTML code: <div> <script type="text/javascript" src="someUrl"></script> </div> Once this script runs, it generates a nested div with links inside like this: <div> <div> <a hre ...

jqueryhtmlcss

Guide on making a persistent sidebar using CSS and JavaScript

I'm in the process of developing a website that features a main content area and a sidebar, similar to what you see on Stack Overflow. The challenge I am facing is figuring out how to make the sidebar remain visible as a user scrolls down the page. T ...

javascripthtmlcssdom

Issue with Thickbox - showing up towards the end of the page

I'm encountering a strange issue with a PHP page in Wordpress. When I include an inline Thickbox on the page and try to open it, the Thickbox appears at the very bottom of the page, below the footer. Interestingly, I copied the generated HTML code an ...

javascriptcsswordpressthickbox

Overlap of columns within a nested flexbox arrangement

While working with React and Styled Components, I encountered a problem of elements overlapping each other: https://i.stack.imgur.com/RuCYu.png There are a few instances of overlap, including: The padding below the <ul> element is colliding with ...

javascripthtmlreactjscssflexbox

What is the best way to customize the small square area found between the vertical and horizontal scrollbars?

Please take a look at the images provided below: https://i.stack.imgur.com/QVHfh.jpghttps://i.stack.imgur.com/cubd8.jpg Whenever both vertical and horizontal scrollbars intersect, it results in a square space. This phenomenon occurs not just within the b ...

htmlcss

Delving into the World of CSS

I have been working on changing the background image using this JavaScript code, but I am not sure what to reference in the CSS file. Despite reading through everything, my screen still remains blank. $(function() { var body = $('body'); var bac ...

javascriptjqueryhtmlcss

A method for utilizing wildcards in conjunction with the .load function

Currently, I am utilizing jquery, jquery mobile, js, html, and css within Phonegap to develop my android/ios application. However, my understanding of js & jquery is somewhat limited. In my index.html file, I use .load to load other html files into s ...

javascriptjqueryhtmlcsscordova

Ensure that the two background images are identical in size and content

Can someone assist me with achieving vertical equality for two background images like in this example image? Currently, I have the following styling applied: background-repeat: no-repeat, repeat-x, repeat-y; background-position: 925px center; However, t ...

cssimageimage-scaling

Issue with JQuery event handlers becoming unresponsive upon resizing the window

JSBin link: http://jsbin.com/4QLDC/6 Here is the JS code snippet that I have written: var toggleContent = function (event) { $(event.target).siblings().toggle(); }; var showOrHidePanels = function () { var windowHeight = $(window).height(); v ...

javascriptjqueryhtmlcss

Hover over me to see the CSS animation translate upwards until it reaches a specific point

I am new to CSS animation and I am trying to create a circle that moves from one end to the other on hover. However, I am facing an issue where the circle goes off-screen when the browser size is changed. How can I make it stop at a certain point within th ...

htmlcssanimationhovertranslate

Why is the "text-overflow: ellipsis" property of a parent div not functioning properly for its child div?

Why is the CSS property text-overflow: ellipsis not working on a child div with the class name cluster-name? .ft-column { flex-basis: 0; flex-grow: 1; padding: 4px; text-overflow: ellipsis; overflow: hidden; } .ft-column > .cluster-name { ...

htmlcss

Adjust the alignment of the text to match the orientation of the image

When creating a layout with text and an image, I want them to be contained within a parent element that has a specified height, such as 100px. The text should adjust to the content, whether it's a short phrase or a lengthy paragraph, without a fixed ...

htmlcss

Navigating Your Way Through the Center (ASP.NET MVC)

My navbar has elements that I want to center within it, but using margin hasn't been successful. Do you have any suggestions on how I can achieve this alignment using CSS? This is the code snippet: <div class="navbar "> <div class="cont ...

htmlcssasp.netasp.net-mvctwitter-bootstrap

Issue concerning invisible border

Let's take a look at my simplified CSS code: body { background: url('bg.gif') left top; } #content { background: #ddd; } .box { overflow: hidden; margin-top: 10px; background: #1e1e1e url('left-bottom-corner.gif&ap ...

css

Align the bottom borders to the lowest content on each line

I am working on designing my homepage using HTML, CSS, JSP, and JavaScript, focusing on the sale of musical instruments and facilitating communication among users. Right now, I am in the process of creating a site-map for my menu configuration chart using ...

htmlcssborder

Coordinates of HTML elements corners after rotation

Seeking to obtain the XY coordinates of an HTML element in order to accurately calculate the physical distance, in pixels, from the corners of a rotated element relative to another element. In this code snippet, I am attempting to determine the distance f ...

javascriptjqueryhtmlcssmath

Combining input elements and captchas in one line within Bootstrap

I am currently working on a form group that includes a label, a captcha image, and an input field for the captcha code. My goal is to have the label positioned at the top of the form group, with the captcha image and input field aligned in one line. I have ...

htmlcsstwitter-bootstrap-3

CSS changes on child elements cause conflicts with parent hover effects

I've come across the following html code : .logo { display: inline-block; width: 30px; position: absolute; top: 50%; opacity: 0; transition: 0.6s; } .container:hover .logo { opacity: 1; transition: 0.6s; } .container:hover .pictur ...

htmlcss

ReactJS does not update the conditional CSS class when hovering with mouseOnEnter or mouseOnOver

I am currently attempting to showcase data in a table where each row features an info icon that is only visible upon hovering. Additionally, I want a pop-up to appear when the info icon is clicked (there is an onclick function assigned to this button). He ...

javascriptcssreactjsreact-nativereact-redux