I recently created a custom CSS class with a font-size property of 2.9vw. It works perfectly on small screens (sm), but appears too large on medium (md) or large (lg) screens. I prefer not to use media queries as I want this to be handled within Bootstrap. Is it possible to apply my class only to specific screen sizes like xs, md, lg in Bootstrap? How can I resolve this issue effectively?
To align your class with the Bootstrap 4 grid, incorporate these elements into your class:
.your-class {font-size 2.9vw}
@media (min-width: 576px) {
/*sm equivalent*/
/*insert your class here*/
}
@media (min-width: 768px) {
/*md equivalent*/
/*insert your class here*/
}
@media (min-width: 992px) {
/*lg equivalent*/
/*insert your class here*/
.your-class {font-size 1.9vw}
}
@media (min-width: 1200px) {
/*xl equivalent*/
/*insert your class here*/
}
UPDATE:
If you want a solution exclusively using Bootstrap without media queries, duplicate your element with identical content like this:
<style>
.my-class-1 {font-size 2.9vw}
.my-class-2 {font-size 1.9vw}
</style>
<!-- Only visible on xl -->
<div class="my-class-1 d-none d-xl-block">My text</div>
<!-- Only hidden on xl -->
<div class="my-class-2 d-xl-none">My text</div>
Learn more about Bootstrap 4 display utilities, although utilizing media queries is generally more preferable.
My mobile drop-down menu is giving me some strange issues. When you toggle the button, the menu briefly appears just below the button before moving to its correct position. Sometimes it doesn't work at all, and clicking has no effect. You can witnes ...
I have been utilizing the table feature within Google Chart Tools to showcase data retrieved from a database. Upon displaying this grid inside a scrollable div, I noticed that the column headings are wrapping to multiple lines instead of displaying in a si ...
I am trying to customize the appearance of my search box by making the text color white. However, even after changing the placeholder color and text color to white in my CSS code, the text color only changes to white when the user clicks out of the form. W ...
I've been attempting to make the bootstrap extension popover X function properly () I created a JS fiddle (http://jsfiddle.net/wp80d5ux/2/), but unfortunately, the popover doesn't appear to be loading. Here is the example I have: Could it be t ...
I have a div with an animated pulsing border, achieved through CSS keyframes. The issue I am facing is that the animation affects the entire content within the div, whereas I want it to apply only to the border itself. Here's my code: <div class=" ...
I'm struggling with updating a nav bar that has different divs based on the link clicked. <script> $(document).ready(function (){ $("#content").load("content/index_content.php"); $('a').click(function(){ $ ...
When working with multiple CSS files for different themes, I noticed that the Login Page is calling one extra CSS file. However, during runtime, some classes from the default CSS are still being used. How can I resolve this issue? ...
I'm trying to incorporate a frosted glass effect into my project, but I'm unsure of where to place the npm install frosted-glass --save command. I use Atom as my code editor and already have Node.js installed, but I can't seem to figure out ...
Within the variables.less file, specifically in the typography section, you will find a variable named @altfontfamily. I am interested in utilizing the Alt Font Family but I am unsure of the process. Is there a specific class that needs to be called in or ...
Is there a way to make an image appear in a different location on the page when it's hovered over? I've searched online but couldn't find a solution using just HTML and CSS. Does anyone know how to achieve this effect? Image not hovered: ht ...
Strange occurrence. I am facing an issue where my code at http://jsfiddle.net/48Hpa/19/ does not seem to be working properly when I transfer it to HTML at http://jsbin.com/AYEQEJE/1/edit. I have thoroughly checked everything including the DOM readiness, b ...
Greetings! I am working on a scenario where a React component needs to pass a padding value to styled components while incrementing it based on the nested rendering level. For example, imagine a List component that must display a parent and child component ...
I am currently working on designing a website template, and I have encountered an issue with positioning three individual columns that contain blocks of content. My objective is to have the first block of content in each column start at the top of their re ...
I've been struggling to get my '.jsp' file to utilize a '.css' file that I created. Initially, I stored the '.css' file in the 'WEB-INF' folder but discovered that this folder is not accessible publicly. So, I m ...
I am currently working on a tribute page for a challenge from FCC and I am facing some issues with adding padding to my .life and .work divs in the HTML and CSS code above. Despite spending a few hours searching for solutions online, I have not been able ...
My goal is to create a single-page app with a scrolling effect using Angular.Js. Each ng-include section within the <div class="viewport" ng-include="'views/file'" ng-controller="MainCtrl"></div> should fill the viewport entirely. How ...
Is there a way to open the nav bar and have it overlap on the right without pushing content to the right? I tried experimenting with position and z-index, but it didn't work. Thank you! Link <div id="mySidebar" class="sidebar" ...
Is there a way to group 2 icons together and display them one above the other? I attempted to use the fa-stack class, but the images are overlapping. How can I achieve this layout? <span class="fa-stack fa-lg"> <i class="fa fa-envelope fa-stack ...
I recently developed a website optimized for monitors, but when I viewed it on an iPad, the right corner was missing some CSS styles. Take a look: Here is the HTML code: <div id="nav-top"> <div class="wrapper"> <!-- To ...
$(document).ready(function() { $("#submitForecast").click(function() { return getForecast(); }); }); function getForecast() { var city = $("#city").val(); var days = $("#days").val(); if (city != '' && days != '' ...