Is it possible to decrease the HTML font size when making the website responsive?

I made the entire website using rem units due to utilizing the bootstrap 4 alpha version. Now, I am ready to begin the responsive design of the site.

My html {font-size: 16px} declaration is set, so I am wondering if I can adjust the size of html in the media queries. For example:

/****responsive css***/
@media only screen and (max-width: 1280px) {
    html{
        font-size: 15px;
    }
}

@media only screen and (max-width: 1199px) {
    html{
        font-size: 14px;
    }
}

I am seeking clarification on whether there are any issues with this approach or if it can be implemented without any problems.

htmltwitter-bootstrapcssresponsive-designmedia-queries

Answer №1

In the case of a device width that is lower than 1280px, it is important to know that the latter rule will take precedence and overwrite the previous one.

To ensure proper styling, consider using the following approach:

@media only screen and (min-width: 1000px) and (max-width: 1199px) {
    html{
        font-size: 14px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1280px) {
    html{
        font-size: 15px;
    }
}

Additionally, it is advisable to utilize percentage units combined with em units for sizing in responsive design. These units are relative CSS units and are not influenced by the device pixel ratio.

body{
    font-size: 62.5%;
}

#element{
    font-size: 1em;
}

For further insights on best practices regarding CSS units, refer to this resource.

Answer №2

If it's not replaced, for instance on the main, it will function

Furthermore, all your text sizes must be in rem, em or %

Elements styled using px will stay as is

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

What's causing this element to overlap the previous one (apologies, once more)?

This is the code: <form id="the_form" action="">ev </div> <!-- final pay_block --> <div class="linea"/> <div class="spacer"/> The "linea" element is currently overlapping the buy button because a margin-bottom of 15px has be ...

csshtml

Customizing Semantic UI Navigation Menu Styles

For the first time, I am incorporating semantic-ui into my React application. The specific package I am working with can be found here: To display my header, I am using the following code: <Menu className='header' > <Containe ...

cssreactjssemantic-uisemantic-ui-react

How can CSS be instructed to "apply the following most specific rule in order to determine this property"?

Utilizing Material-UI and JSS for CSS management, I've encountered an issue where styles appear differently in development versus production. The discrepancy stems from the order of rules within the file. For instance, when defining an element like ...

cssmaterial-uijss

Using CSS to style GLTF objects in THREE.js

Can CSS be applied to a GLTF model in THREE.js, such as setting transparency? Is it possible to achieve this with CSS styling rather than using JavaScript? For instance: <style> .transparency { opacity: 0.5; } </style> and then <a-asset- ...

cssthree.jsaframe

Alter the URL and CSS upon clicking an element

Currently, I am faced with a challenge on my website where I have multiple pages that utilize PHP to include content and jQuery to toggle the display of said content by adjusting CSS properties. However, I am encountering difficulty in implementing this ...

javascriptjquerycss

The button's color remains static in Internet Explorer despite attempts to change it using a linear gradient background image

I'm curious why the button appears grey in IE and turns blue on hover, rather than starting off blue and becoming darker blue when hovered over. I've managed to make it work in other browsers, but I'm struggling with the code for IE. Thank ...

htmlcssinternet-explorer

When the button is clicked, a modal will pop up

Looking for help in incorporating JavaScript to create a responsive modal that pops up with lyrics when a button is pressed in a table. Any assistance would be greatly appreciated. Note: Only the code for the table has been provided. Let me know if you&ap ...

javascripthtmlcsshtml-tablemodal-dialog

Working with both Javascript and jQuery code within a single HTML file

I recently created a website and on one of the pages, I added some jQuery elements like a start button and progress bar. However, when I tried to implement a JavaScript timer on the same page by adding the script into the header, the jQuery elements stoppe ...

javascriptjqueryhtml

Utilize PHP SVG images to trigger internal JavaScript code through the <img> tag

Here is a php function that generates an SVG image. public function actionJsTest() { header('Content-Type: image/svg+xml'); $svg = ''; $svg .= '<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/ ...

javascriptphphtmlsecuritysvg

Changes in bottom position when scrolling in landscape mode on iOS Safari

I'm currently using ReactJS and have implemented a mobile menu bar with CSS properties position: fixed and bottom: 0. The menu bar stays locked at the bottom of the page in both portrait and landscape orientations on all browsers except for Safari. I ...

cssreactjsscrollcss-positionmobile-safari

Is it possible to display the triangle external to the container element?

I'm currently working on creating a CSS menu. My goal is to have a triangle of a specific size appear next to the container when the li element has a class of active. To see an example, check out the following http://jsfiddle.net/hcabnettek/MeczJ/ Wh ...

csshtmlgeometry

Positioning the div in the center

Having trouble centering a div inside a 100% wide container. Here is the HTML code: <div id="body-outside"> <div id="body-inside"> content </div> </div> And here is the CSS: #body-outside{ width:100%; flo ...

htmlcss

How to style 1 out of every 3 div elements using absolute positioning in CSS

Imagine a setup where there is a banner at the top, with 3 divs placed side by side underneath it. The interesting part is that when you scroll down, only the center and right div should move along. #banner { background:blue; color:white; position ...

htmlcss

What is the proper way to showcase thumbnails in different sizes?

Currently, this is what I have: https://i.sstatic.net/VOC2z.png The display looks optimal with high-resolution landscape photos. This is the HTML and CSS code in use: <div class="upload-thumb ng-scope visible"> <span class="delete-media"&g ...

javascripthtmlcss

Displaying data from a PostgreSQL database to users based on their login username in Flask

I am struggling with displaying specific data from a database table based on a user-entered username. The goal is for a user to enter their ID and access a page showcasing their corresponding data from the table. While I can show the username, I'm fac ...

pythonhtmlpostgresqlflask

Position the division at the location of the cursor for particular usemap components

Looking for a way to position a division on top of an image using a usemap. Interested in having the div only appear when the mouse hovers over a particular area, and at the precise location of the cursor. Came across some examples using jQuery, similar ...

javascriptjqueryhtmlpositionimagemap

Unable to cycle through an array of objects in JavaScript. Only receiving output for the initial element

var people = new Array(); var individual = { first_name: "Padma", identification_number: 1, region: "India" }; people.push(individual); people.push([individual = { first_name: "Balaji", identification_number: 3, region: "India" }]); people. ...

javascripthtmljquery

Completion of the form within the Bootstrap popover

I have a feature where dynamically created rows contain an "add" button. When the user clicks on the add button, a form is loaded into a Bootstrap popover. See FIDDLE DEMO My issue is: Why isn't this code being triggered? I am trying to validate ...

javascriptjqueryajaxtwitter-bootstrap

Detecting click events in D3 for multiple SVG elements within a single webpage

My webpage includes two SVG images inserted using D3.js. I am able to add click events to the SVGs that are directly appended to the body. However, I have encountered an issue with another "floating" div positioned above the first SVG, where I append a dif ...

javascriptjquerycssd3.jssvg

Guide to deactivating the user interface in AngularJS until receiving a server response

Currently, I am in the process of developing a web application using AngularJS and Node.js (Express). During various interactions within the app, users will be required to communicate with the server. Depending on the response received, different actions ...

javascriptnode.jstwitter-bootstrapangularjsexpress