Adjust the size of the font based on the screen resolution

What is the best way to adjust font size based on screen resolution so that text remains as a single line when the screen is small? For example: http://prntscr.com/2qa9ze

<div class="centerbreaking">
<section id="breaking-news">
    <div id="breaking-news-main" class="shadow">
        <div id="breaking-news-title">Latest News</div>
        <div id="<?php if ($mobile) { echo "breaking-news-inside-mobile"; } else { echo "breaking-news-inside"; } ?>">
          <ul id="breaking-news-list">

                 <?php $i=0; foreach ($results as $result) : ?>
    <li><label type="text" name="text<?php echo $i;?>"><?php echo htmlspecialchars($result['text'],ENT_NOQUOTES,'UTF-8');?></label></li>
                  <?php $i = $i+1;
                        endforeach;
                   ?>
                   </ul>
        </div>
    </div>

<script>
$(function() {
  $('#breaking-news-inside').vTicker();
});
</script>
</section>
</div>

This is my CSS:

#breaking-news-main { float:left; height:40px; margin:5px 0 0; width:100%; background-color:#96040D; color:#fff; text-transform:uppercase; font-weight:bold; }
#breaking-news-title { background: url("images/bn_title.png") no-repeat scroll 0 0 transparent;color: #000000;float: left;font-size: 12px;height: 40px;line-height: 40px;padding: 0 0 0 10px;text-transform: uppercase;width: 112px;z-index: 999;}
#breaking-news-title p {padding:15px 10px;}
.breaking-news-inside {float: left;height: 40px;line-height: 40px;margin: 0 0 0 5px;padding: 0;width: auto;}
#breaking-news-list {font-size:15px;}
htmlcsstext

Answer №1

To adjust the font size on your website, you can use em or % units. You can also opt for px if that's your preference. Make sure to fine-tune it using Media Queries based on your requirements.

For instance:

body{font-size:16px}
#bannerDiv{font-size:1em}
@media only screen and (max-width: 767px){#bannerDiv{font-size:0.8em}}
@media only screen and (max-width: 479px){#bannerDiv{font-size:0.6em}}

In the above scenario, #bannerDiv will inherit the 1em value (equivalent to 16px) set in the body tag. When you specify @media with 0.6em, it reduces the font size from 16px to 9.6px.

I hope this explanation proves useful!

To delve deeper: css3-mediaqueries

Note:
Keep in mind that this is a CSS3 feature. For older browser compatibility, consider incorporating some JavaScript solutions.

Answer №2

My recommendation would be to adjust the width of your input using em units instead of px. This will ensure that the input size adjusts proportionally with your font size. Additionally, you can utilize the css property text-overflow:ellipsis (along with overflow:hidden) to show "..." when the text exceeds a certain length.

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

Trouble Viewing Image File

I am facing an issue where I cannot upload an image file from my computer onto my HTML file, as it is not showing up in the browser. However, when I link an image file from the web, it works perfectly fine. I have double-checked the file path and ensured ...

htmlcss

Django just threw a fit, saying 'Cannot assign "u'Wing'": "Truck.MODEL" must be a "MODEL" instance' while trying to add a new object to the database

Database Models: class MODEL(models.Model): ModelName = models.CharField(max_length = 128, unique = True) URL_Slug = models.SlugField(unique = True) ... class Maker(models.Model): maker = models.CharField(max_length = 128, unique = True) ...

pythonhtmldjango

Is there a way for me to position my arrow beside the header while still keeping the toggle function intact?

Can anyone assist me in positioning my arrow next to the header text, which I toggle on click? I attempted placing the arrow <div> into the H1 tag, but then the toggle function stops working. Any help would be greatly appreciated! Please includ ...

javascriptjqueryhtmlcss

Changing the CSS property of a single table cell's innerHTML

I have a question that may seem silly, but I'm going to ask it anyway. Currently, I am iterating through a list of strings that follow the format "1H 20MIN" and adding them to table cells using the innerHTML property like so: for (i = 0; i < list ...

javascripthtmlcss

Ajax - Retrieving data from a different webpage

My index.php contains the following HTML: <div id="showDetails"> </div> <div id="showList"> </div> And this Ajax function is also in index.php: function ...

javascriptphphtmlajax

Siblings are equipped with the advanced selector feature to

I'm struggling to understand this setup I have: <div class="container"> for n = 0 to ... <a href="some url">Link n</a> endfor for each link in ".container" <div class="poptip"></div> ...

javascriptjqueryhtmlcss

Ways to position a flexbox child at the bottom of its container

Utilizing Flexbox to arrange different content in a panel, there is an issue with the positioning of icons within each panel. The fourth icon wraps around and aligns with the first one at the top of its container, instead of lining up with the third icon a ...

htmlcssflexboxvertical-alignment

Is it possible to call a REST API in Javascript by passing the username and password as

I have been attempting to use Javascript to call the AwaazDe REST API with a specific username and password, but I'm encountering issues. Below is my code: function authenticateUser(user, password) { var token = user + ":" + password; ...

javascriptphphtmlrest

Creating code to ensure a div element is displayed only after a specific duration has elapsed

Can anyone help me with coding to make a div appear on a website after a specific amount of time? Here's an example of what I'm trying to achieve: <div class="container"> <div class="secretpopout"> This is the hidden div that should ...

javascriptjqueryhtml

I am struggling to apply custom CSS styles to the scrollbar within a Card component using MUI react

import React from "react"; import Card from "@mui/material/Card"; import CardActions from "@mui/material/CardActions"; import CardContent from "@mui/material/CardContent"; import CardMedia from "@mui/material/Ca ...

javascriptcssreactjsmaterial-ui

Make sure the text fits perfectly without any extra spaces

When working with CSS/HTML, I noticed that using a simple text within a div without any margin or padding, and specifying a font-size of 36px with a line-height also set to 36px doesn't fit perfectly - there is always some spacing at the top of the li ...

htmlcsstypography

What is causing the issue where Multiple file selection does not work when using the multiple attribute

I am having issues with uploading multiple files on my website. I have created an input field with the attribute multiple, but for some reason, I am unable to select multiple files at once. app.html <input type="file" (change)="onChange($event)" req ...

htmlangular

Trouble with margins on tr elements and borders in CSS and HTML

Here are my current findings: http://jsfiddle.net/62hKs/2/ What I desire to achieve: 1) Create a 15px margin between the two red boxes displayed 2) Modify the appearance of the 4 boxes so they resemble only 2, by eliminating the middle red line caused ...

htmlcss

Using jQuery's sortable functionality to rearrange rows in a table can cause conflicts with Angular's orderBy feature

In the past, my angular app used a table with orderBy to sort rows based on a specific column. By clicking on a table header, the orderBy arguments would change and the list would be sorted according to the values in that column. Now, I am experimenting w ...

javascriptjqueryhtmlangularjsjquery-ui

Tips for breaking out of the foundation row and aligning with the right edge of the viewport

I have a CodePen example showcasing the Zurb Foundation grid. I am looking for a way to make a div extend to the right edge of the viewport while keeping the left edge in line with the grid as the viewport is resized. <div class="row"> <div cla ...

csszurb-foundationcodepen

Exploring the jungle. Cursor acting strange while dragging

I am currently working on implementing drag-and-drop functionality in my project, utilizing slip.js from slip.js. To enhance the cursor during dragging, I have assigned class="draggable" to each draggable <tr>. The CSS code for this class is: .drag ...

csssafaridrag-and-dropcross-browsercursor

The Typescript Select is displaying an incorrect value

Here's the code snippet I've been working with: <select #C (change)="changeSelect(zone.id, C.value)"> <option *ngFor="let town of townsLocal" [attr.value]="town.data" [attr.selected]="town.data === zone.town && 'selected& ...

javascripthtmltypescriptionic2

Unique design and elements featuring the `width: auto` property for custom fonts

In my current project, I am utilizing the popular 'Open Sans' font family. However, I am encountering a specific issue. The problem arises with buttons and other elements that have width: auto. Upon page load, these elements initially have their ...

csswebfonts

Use CSS to create a fullscreen animation for an element

Is there a way to animate a div element so that it expands to fit the screen when clicked without specifying an initial position? I need the div to be able to adjust dynamically within the screen. .box { width: 80px; height: 80px; background: red; ...

htmlcssanimationfullscreen

How can I utilize Material-UI's Grid component to make a single cell occupy the entire remaining horizontal space?

I am currently utilizing the Grid component from material-ui in my React 16.13.0 application. My objective is to create a row with three items. The first two items are supposed to occupy only the required space without specifying pixel values. I want the t ...

cssreactjsgridmaterial-ui