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

What could be the reason that my Bootstrap design is displaying narrower than the designated container?

Having some issues with a JavaScript code that involves innerHTML, causing a discrepancy in width compared to the CSS and Bootstrap rules I have set up. Below is the JavaScript code snippet: let numeroStreams = document.getElementById('num') let ...

javascripthtmlcssbootstrap-4innerhtml

Button placement that feels out of place

I'm looking to style an input-group with a form input and submit button using Bootstrap 5. Here's my current code: .card { margin: auto; width: 50%; padding: 10px; opacity: 0.9!important; top: 250px; } <div class="card-header"> ...

htmlcssbootstrap-5

Looking to modify the contents of a shopping cart by utilizing javascript/jQuery to add or remove items?

I'm dealing with a challenge on my assignment. I've been tasked with creating a Shopping Cart using Javascript, HTML5, and JQuery. It needs to collect all the items from the shop inside an Array. While I believe I have most of it figured out, I a ...

javascriptjqueryhtmlshopping-cart

Struggling to close modal popup after submitting form

click here for imageCurrently, I am working with the bootstrap modal plugin to create an inquiry form. The issue I am facing is that even though I am using the "ng-submit" directive to save the form details, when I click submit, the form submits successful ...

javahtmlangularjs

What could be causing my websocket server to not properly serve my HTML page?

I'm currently facing an issue with establishing a web socket connection using NodeJS in my app.js file. Despite declaring a listener on port 8080, the connection is not getting established and no logs are being generated in the console. My goal is to ...

node.jshtmlwebsocketserver

Using VML for background images in Outlook using HAML: A step-by-step guide

I am currently working on formatting an email digest using HAML and tables. My goal is to set a background-image to a table-cell in the email, but I've come to realize that Outlook requires VML in order to display a background-image correctly. After ...

cssemailoutlookhamlvml

Nested click jQuery with draggable elements

After taking advice from @amphetamachine in this thread, I was able to successfully manage nested clicks using jQuery. However, the drag feature that was previously functioning perfectly has now stopped working since I implemented the delegates. The main ...

jqueryhtmljquery-ui

The nested table is overflowing beyond the boundaries of its outer parent table

I have created a nested table, shown below: <table border="0" width="750" cellspacing="0" cellpadding="0"> <tr align="center"> <td width="530"> <table border="0" cellspacing="0" cellpadding="0" width="530"> <tr&g ...

htmlcss

Customize bootstrap cards to have a full height and add a bottom margin to enhance the

My current project involves creating a grid of Bootstrap 4 cards that need to meet specific requirements: All cards must be contained within a single class="row" div. This is because the number of cards is unknown and I want the layout to adjust well acr ...

cssheightbootstrap-4marginbootstrap-grid

Animated the height of a rectangle during initial loading and when the mouse hovers over or leaves

Being new to Vue.js, I am looking to create a simple animation on component load for the first time. You can find my initial code here: <template> <div id="app"> <div class="rect" /> </div> </template ...

javascriptcssvue.jscss-transitions

How can I simulate pressing the ENTER key in Selenium without selecting any element?

Having trouble using the firefox selenium plugin and sending the enter key after pasting text? The ENTER key press should not interact with any other element on the page, just a simple 'dumb' ENTER key press. error [error] Element name=code not ...

javascripthtmlseleniumweb-scrapingelement

Is it possible to include more details in the document?

Is it possible to include additional metadata, such as a record ID, within a file without causing corruption? I am looking for ways to add extra information to files. Can anyone offer some guidance? Your help would be greatly appreciated. Thank you! ...

jqueryhtmlfilefile-uploaddata-uri

Continue scrolling once you reach the fixed-positioned div

live demo html <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> css .container{ margin: 0; padding: 0; ...

jqueryhtmlcss

Using jquery to create HTML elements but unable to remove them using jquery

I'm facing an issue with removing newly created li elements in an unordered list using jQuery. The delete button works perfectly fine for the existing li, but not for the ones added dynamically. <!DOCTYPE html> <html lang="en> <head> ...

jqueryhtml

Center Items in Flexbox, Implementing React Material with React

In my React App, I am utilizing flexbox and React Material to align the searchbar and clear button on the same line with space between them. Here is the link for reference: CLICK HERE <div className={classes.searchBarSection}> <Paper com ...

cssreactjsmaterial-uiflexboxmaterial-design

Jquery div mysteriously disappearing without explanation

I need some help with my image options. Whenever I hover over the image, the options appear below it. However, when I try to move down to select an option, they disappear. I have configured the slideUp function so that it only happens when the user moves a ...

jquerycssjquery-selectors

Tips for positioning a div between two vertically aligned input elements

I'm trying to figure out how to place a div between two inputs with the same height and vertically aligned. It seems like a simple task, but for some reason, the code below isn't working: input{ width: 35%; border: 1px solid #A7A7A7; ...

htmlcss

Tips for creating a MaterialUI list that wraps to the next line?

import React from 'react'; import { List, ListItem, } from '@material-ui/core'; import { makeStyles, createStyles, } from '@material-ui/core/styles'; import clsx from 'clsx'; import VideoCard from './VideoCa ...

cssreactjsmaterial-ui

Display the widget beyond the boundaries of the sidebar

Currently, I am using my own custom theme called Total. I want to display the Sidebar Login plugin's widget in the header section of my website. I attempted to do this with the following code: <div class="login"><?php the_widget('sideba ...

phpjqueryhtmlcsswordpress

Displaying a specific division solely on mobile devices with jQuery

I need to implement a feature where clicking on a phone number div triggers a call. However, I only want this div to be displayed on mobile devices. To achieve this, I initially set the div to "display:none" and tried using jQuery to show it on mobile devi ...

javascriptjqueryhtmlcss