increase the size of text for mobile devices by utilizing twitter bootstrap

Is there a way to increase the font size of my content on my app, which is using CSS based on Twitter Bootstrap 3? I attempted a solution from this particular question, but it seems to be overridden by Bootstrap itself. Here is what I have tried:

@media (max-width: 600px)
html {
  font-size: 130%; // strikethrough in chrome = inactive style
}

This is how I am currently loading my CSS files (Bootstrap files are fetched from Bower):

<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap-theme.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">

Can anyone advise on how to make the fonts larger for devices with a max width?

Update: Even adding !important does not seem to have an impact. It appears that Bootstrap is prioritizing font styles over the following CSS:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}
htmlcsstwitter-bootstrapfont-size

Answer №1

Give this a try, it should do the trick. Just make sure you include this code after the bootstrap CSS file.

@media (max-width: 600px){
  html {
    font-size: 130% !important; // strikethrough in chrome = inactive style
  }
}

If the styles are getting overridden by the body tag, then try using this:

@media (max-width: 600px){
  body {
    font-size: 130% !important; // strikethrough in chrome = inactive style
  }
}

Answer №2

To enhance your website's appearance, consider adjusting the font settings for both the html and body elements. It is recommended to load your CSS file after the bootstrap CSS file.

@media (max-width: 600px){
    html, body {
      font-size: 130%; // This style appears inactive when viewed in Chrome
    }}

Answer №3

Make sure to include braces in your media query for it to take effect on the following content properly.

@media (max-width: 600px) 
{
    html {
        font-size: 130%; // strikethrough in chrome = inactive style
   }
}

Answer №4

Make sure you include the curly braces in your media query, like this:

@media (max-width: 600px) {
html {
 font-size: 130%; /* strikethrough in chrome = inactive style */
 }
}

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

Employing the HTML post method in conjunction with checkboxes

I am facing an issue while trying to use the HTML post function with PHP to insert a value of 1 or 0 into a database based on whether a user has checked a checkbox or not. Every time I submit the form, I encounter index errors regardless of the checkboxe ...

phphtmlmysqlphpmyadminxampp

How can I eliminate the tiny white square located beneath the scrollbar track?

`::-webkit-scrollbar{ width: 12px; } body::-webkit-scrollbar-track{ background: #f1e9e9; border-radius: 10px; margin-block: 0.1875rem; } ::-webkit-scrollbar-thumb{ background-color: #582965; border-radius: 10px; border: 3px so ...

htmlcssscrollbar

Error loading CSS file on Google App Engine

I attempted to add a CSS file as a static file in my project just to experiment with how it functions, but encountered difficulties right from the start. The content of the CSS file is: body { background:#00FF00; } In addition, here is my configurat ...

htmlcssgoogle-app-engine

Best approach for routing using express

My current project involves using Express to develop a small website. Here is the code snippet I am working with: var package_express = require('express'); var app = package_express(); app.get("/", function(req, res){ res.sendFile(__dirname ...

htmlnode.jsexpress

Search for and swap out a parameter value within an array located in a div using jQuery

A query I have is regarding a div where I am aiming to update the value of a parameter within an array. The PHP code I am using to create the HTML is as follows: <div id="data1<?php echo $data['id']; ?>" data-url="<?php echo 'p ...

jqueryhtml

Headerbar overlapping Div when scrolling

I'm currently trying to create a fixed header bar that allows the content of the page to scroll beneath it rather than displaying above it. This functionality is working on multiple pages, but I'm experiencing issues with my calendar page. When ...

htmlcssangular

Having trouble with the border styling on my HTML input form

I've been struggling to add a solid black border around the text input in my form. However, no matter what I try, the border doesn't seem to style correctly. Here's the code snippet I'm using: #forminput { border: solid black !import ...

htmlcss

Bootstraping Twitter with PHP session starting has become a standard practice in modern

Currently, I am developing a website using PHP and Twitter Bootstrap. The issue I'm encountering is that if I include session_start() first, the layout gets messed up because Bootstrap needs <!DOCTYPE html> to come before it. On the other hand ...

phphtmlcsstwitter-bootstrap

When I utilize $router.push() to navigate to a different page, the back button will take me back to the previous page

Within my Vue project, there is an HTML page that I am working on. Here is the link to the page: https://i.sstatic.net/cbtqM.png Whenever I click on the "+"" button, it redirects me to this specific page: https://i.sstatic.net/0rmMD.png This page funct ...

javascripthtmlvue.js

Concerning geoext

I am currently working on creating a framework for overlaying layers on the web. I am using geoserver to publish the layers and the geoext tree.js example to display all the layers in a tree-like panel. However, I'm encountering an issue with zooming ...

javascripthtmlgeoext

Are you looking to present information through indexing?

Currently, I am working on codeigniter and facing an issue while trying to display data from the backend onto the view files. Below is the snippet of my code: $result = $obj->get_details(); if ($result[0]) { for ($i=0; $i<count($res ...

phpjavascripthtml

Optimizing CSS With jQuery During Browser Resize

I am currently facing an issue with recalculating the height of the li element during window resizing or scrolling. Strangely, on page load, the height is no longer being re-calculated and set to the ul's child height. Here is the code I have written ...

javascriptjquerycss

Save a value outside of a code snippet

In my Play Framework project, I am working with a views .html file where I have the following code snippet: <script type="text/javascript"> setInterval(function() { $.get("file2", function(${list1}, ${list2}, ${list3}){ $("#result").h ...

javascripthtmlajaxplayframeworkrefresh

Is there a more concise way to write this code in JS, CSS, or HTML programming?

Seeking advice on JS / CSS / HTML programming! I may not be the best at articulating my question, so I apologize for any confusion. Let me clarify my intention behind this specific code section and explore potential solutions. The goal is to allow users ...

javascripthtmlcss

Creating a React component with a circular loader that displays percentage and texts using Material-UI

I've developed a CircularLoader component using Material UI. The issue I'm facing is that when the variant is set to 'indeterminate', the loader should display without any percentage indication. However, if the variant is 'determin ...

cssreactjsreact-hooksmaterial-ui

Adjust the color of the text in the Stepper component using React Material UI

Is there a way to modify the text color within the stepper? Specifically, I aim to have the number 3 displayed in black instead of white: Image Link ...

cssreactjsmaterial-ui

How to adjust the background picture opacity in HTML

Is it possible to adjust the transparency of a background image in HTML? I came across one solution that involved adding a box on top of the background picture and changing the opacity of the box, which in turn changed the opacity of the background pictur ...

htmlbackground-imageopacity

Is it possible to create various HTML elements from JSON data using JQuery?

Is there a way to utilize Jquery and Javascript to extract JSON data from $ajax and then iterate through it using a foreach loop, in order to create a string that can be appended to the HTML DOM? For example: $(document).ready(function (e) { $.ajax({ ...

javascripthtmljquery

Selenium failing to input text into field

My goal is to extract data from the following URL: There are three key components to this extraction: Choosing the correct game type under "Valitse peli" I want to select "Eurojackpot" for this. Setting the date range using variables. Currently, I hav ...

pythoncssseleniumweb-scraping

Transferring checkbox status from HTML (JavaScript) to PHP

I am a beginner in JavaScript and I am trying to get the value from a variable in JS, send it via post (or ajax) to a PHP file, and display the text. However, I have attempted various methods but always encounter an undefined index error in PHP. Below is ...

javascriptphphtmlajax