difficulties arise when adjusting font size in html and css

When I first created an all HTML/CSS website, I used clickable images as a menu that scaled perfectly on all monitors and browsers. Now, for my new project, I wanted to use a background image for the menu with hyperlinked text on top. I thought setting the font size in % would make it scale smoothly like everything else did, but it didn't work as expected.

I'm struggling to understand where the percentages for the text size are coming from. Even if I set a 100% font size in a div that is only 2% or 3% of the page's size, the text ends up too large or too small based on different resolutions.

I know how to make elements scalable based on browser window size, but I'm unsure how to adjust text size accordingly. If anyone can provide a solution using just CSS and HTML without involving scripts, I would greatly appreciate it. I prefer to stick to clickable images, percentages, or pixels for the entire design.

Thank you.

Answer №1

font-size operates differently than you might think.

The size specified by font-size is relative to the font size of its parent element.

In CSS, adjusting font sizes based on window width is not supported. However, a solution can be implemented using Javascript.

Answer №2

To address this issue, consider utilizing a flexible and responsive CSS framework. Implement media queries to dynamically adjust the font size based on the browser width, ensuring optimal display across various screen sizes.

Some recommended frameworks include:

- 1140 grid (http://cssgrid.net/)

- Skeleton (http://www.getskeleton.com/)

- A custom framework I am currently developing (https://github.com/gogogarrett/Muscle)

I trust this information proves valuable.

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 is the best method for inserting a URL link using jQuery within a CSS element?

Check out this code snippet: <span class='maincaptionsmall'> Test </span> Due to certain ajax and jquery scripts on my page, I am unable to use HREF as a link. In other words, the following code won't work: <span class=&ap ...

javascript html css hyperlink href

Ways to conceal specific content within a text using CSS

Help me with the updated code <html> <title>css</title> <head> <style> #st { z-index: -114; margin-right: -80px; } </style> </head> State Code : <span><span id="st"></span>Maharashtra - MH ...

html css

Using jQuery to select a specific checkbox from a group of checkboxes with identical IDs

There is an issue with multiple checkboxes having the same ID in an asp.net repeater control. Users can select either email or phone against each record in the repeater rows. In the example below, there are two rows. If you select the email icon in the fi ...

javascript jquery html asp.net checkbox

Embedding SVG styling directly into the HTML document

When importing svg images with color into Mapbox Studio, they appear as black and white. The troubleshooting website mentions: If your SVG appears black after adding to Mapbox Studio, it may be due to using style properties in tags instead of inline sty ...

css svg mapbox adobe-illustrator

Choosing radio buttons within rows that contain two radio buttons using ngFor

This section showcases HTML code to demonstrate how I am iterating over an array of objects. <div class="row" *ngFor="let item of modules; let i = index;"> <div class="col-md-1 align-center">{{i+1}}</div> <div class="col-md- ...

html json angular typescript ngfor

iOS Safari is displaying the keyboard with a comma instead of a period

Is there a way to display a comma instead of a period on the iOS keyboard in Safari? Upon tapping on the input field, users are presented with a keyboard featuring a period. https://i.sstatic.net/nMFCg.png ...

ios html safari

Printing Multiple Pages Using JavaScript and Cascading Style Sheets

Encountering difficulties displaying page numbers when printing multiple multipage reports Here is the provided HTML Format : <style type="text/css> body { counter-reset: report 1 page 0; } td.footer:after { counter-increment: page; content ...

javascript jquery html css

Tips for incorporating your personal touch while utilizing Snipcart

I have created an ecommerce platform with GatsbyJS and Snipcart, but I am struggling to override the default theme provided by Snipcart. When I try to change the main default CSS through gatsby-config.js, it does not seem to work. Does anyone have a soluti ...

javascript css reactjs snipcart

Using javascript to locate and substitute a word divided among multiple tags - a step-by-step guide

I need to utilize JavaScript to locate and substitute a word that has been separated into multiple tags. For instance, consider the following HTML code: <html> <body> <div id="page-container"> This is an apple. ...

javascript html node.js

Tips for creating animated images with a mask or clip using HTML, CSS, and jQuery

I am attempting to animate the movement of an image under a stationary mask. I have 2 methods for achieving this: one using the mask property and the other using clip First method using Mask : View working script at http://jsfiddle.net/2Aecz/ or below & ...

jquery html css animation html5-canvas

Use jQuery to achieve smooth scrolling when clicking on a link that points to a specific #div, maintaining the URL

I have a single page design with smooth scrolling implemented using jQuery with the following code: function ScrollMe(id){ var offset = $("#"+id).offset().top-50; $('html,body').animate({scrollTop: offset},'s ...

jquery html

Is there a way to ensure that the div is displayed on the same line?

Check out the jsfiddle link provided: http://jsfiddle.net/HE7yT/ I'm trying to align the Image, content, and Amount in the same line. How can I achieve this? The goal is to have "150" displayed on the same line as the picture. var HTML = $(' ...

html css

"jQuery's .each() method is only iterating through the last element in

I am encountering an issue with this function not operating correctly... only the last Element shows the box. NOTES: <aside> is set to position: fixed; and I understand that this is not the "correct" use of <article> tags, but it helps me dist ...

javascript jquery html dom

Safari compatible JavaScript needed for enforcing required fields in HTML5

I have been using the following script to adjust the HTML5 required attribute of my input elements. However, I am now looking for a way to tweak this script so that it can also function properly in Safari browsers, where support for this attribute may be l ...

javascript php jquery html

Spinning an SVG path with CSS3 in a circular motion from its central axis

I have a collection of SVG paths, and one of them is displayed below: <path id="GOL" class="st0" d="M37.5,430.5l-12.4-12.4v-13.3h-4.2c-7.2,0-13.9,2.5-18.7,7.5c-4.7,4.9-7.3,11.3-7.3,18.3 c0,7,2.6,13.5,7.3,18.3c4.8,5,11.4,7.6,18.6,7.6l4.2,0v-13.7L36. ...

html css svg css-animations

Detecting collisions on a tile map using only JavaScript

Currently, I am developing a tile-based game using a traditional method (utilizing two for loops) and struggling with writing collision detection. I want the blue square to remain on the screen and appear on top of the tiles once the start button is clicke ...

javascript html css canvas

Show the date and time in a visually appealing way by using HTML and JavaScript in an HTA application with scrolling effects

I have the following JavaScript code to show the current date in the format Mon Jun 2 17:54:28 UTC+0530 2014 within an HTA (HTML application). Now, I would like to display it as a welcoming message along with the current system date and time: Mon Jun 2 17: ...

javascript css html hta

CSSer Q&A