When you adjust the size of your web browser, the text may become distorted in HTML and CSS

My website has a problem with text resizing when the browser window is made smaller. The text gets squashed in the middle and creates more lines than needed. Here is my code:

Entire Document

HTML: http://pastebin.com/kj1jvTjv CSS: http://pastebin.com/A1CP7Viq

HTML:

</div>
<div id="NewsPosts">
<p>Toontown Classic is coming soon</p>
</div>

CSS:

#NewsPosts{
position: relative;
bottom: 0px;
top: -925px;
width: 45%;
position: center; 
margin: 0 auto;
font-size: 20px; 
margin-left: 10; 
margin-right: 10; 
text-indent: 5; 
}

Answer №1

It's a bit unclear what you're asking for in your question. If you want the font size to adjust based on the browser's viewport size, you can use vw units (check out the jsfiddle example below).

Take a look at this: http://jsfiddle.net/km1hbpzv/1/. Resize the browser window to see if that's the effect you're looking for.

I took the HTML and CSS code from your Pastebin post and made some modifications as per your original requirements.

Here are my changes:

#NewsPosts {
   position: relative;
   bottom: 0px;
   top: -925px;
   width: 45%;
   text-align: center; /* changed from position: center */
   font-size: 2vw; /* updated from 20px to 2vw (viewport width unit) */
}

#DateAndBy {
    position: relative;
    bottom: 0px;
    top: -930px;
    font-size: 3vw; /* updated from 30px to 3vw (viewport width unit) */
}

Your HTML structure may have some issues that could make future styling adjustments tricky, but for now, this should work based on the details provided in your post.

If you want to explore more about using vw units and other font-size practices, check out this link: Pure CSS to make font-size responsive based on dynamic amount of characters

Answer №2

center is not a valid value for position, so you can't use position: center;. To center a div in a window, set the margin-left and margin-right properties to auto. It seems you tried this with margin: 0 auto;, but then contradicted it with

margin-left: 10; 
margin-right: 10;
. The value should be specified as 10px or 10em. Avoid unnecessary position: relative, unless it's essential for other HTML elements. Recommended CSS:

#NewsPosts {
    margin-left: auto;
    margin-right: auto;
    padding: 10px 15px;
    font-size: 20px;
    width: 45%;
}

This code should achieve your desired result.

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

Dynamic graphic with integrated navigation menu

I'm looking to achieve a similar design concept like the one on this website: The navigation bar should remain fixed at the bottom of the window until you start scrolling. I am unsure if this can be done using just CSS, but I have made some progress ...

Utilizing jQuery to establish various AJAX requests through functions on page load and button click

Utilizing a basic ajax call both on page load and click events, where I have defined separate functions for each. Despite using different URLs and parameters in the function, the JSON data from the previous call is still being displayed when clicked. Bel ...

Leaflet map displaying accurate position only upon browser resize

Let me start by showing you a screenshot of the issue I am facing. Check it out here The screenshot clearly shows a gap between my expandable left navbar and the left border of the map image. However, when I resize the browser window by dragging and drop ...

Step-by-step guide for making a CSS triangle design that is compatible across different browsers

Here's a common CSS code for creating a CSS triangle: display: inline-block; vertical-align: middle; content: " "; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 6px solid black; width: 0; height: 0; Click here ...

creating a multi-tiered dropdown menu using both CSS and JavaScript

I am in need of a multi-level (drop down) menu feature, that allows me to make changes to the menu in just one file, without having to navigate through each individual page. I require a three level menu. I have attempted to modify someone else's code ...

CSS - when "start" is not 1, an alternative to the "nth-child" selector

Imagine a scenario where you have a list of questions that start at 0 and you want to apply CSS styling based on their value. For instance, consider the following list... <b>How are you feeling?</b> <ol start="0"> <li>Great< ...

Tips for maintaining focus on an editable div using jQuery

Is there a way to prevent an editable div from becoming unfocused when clicking on a formatting bar created using jQuery? I've been trying to implement this feature but can't seem to figure it out. Any advice would be greatly appreciated. Many th ...

Unable to display images - PhoneGap

I am experiencing an issue where images that are being dynamically added to my HTML display correctly in Firefox, but on all the Android devices I have tested, the images do not appear. Instead, a box with their alt text is shown. HTML: <div class="ui ...

What is the method for stretching the navbar and content to fill the entire viewport in Bootstrap?

Can anyone help me with an issue regarding a navigation bar and content created in Bootstrap 5? I'm trying to use vh-100 to make both the navigation bar and content stay on the view page without a scrollbar. However, the size of the navigation bar is ...

Tips for adding additional columns to the final data output

When retrieving data from the database and binding it to a table, I found that I wanted to include additional columns in the displayed data. While I am getting the name value from the database, I also want to add a city column to the table on the UI. View ...

What is the best way to incorporate a custom modal created with HTML/CSS into my Bootstrap website?

I am facing an issue with the modal implementation on my bootstrap website. The modal is supposed to open when a user clicks a button. Strangely, it was working perfectly fine on another HTML/CSS file, but once I added it to this Bootstrap file, it stopped ...

Use CSS to position three buttons in the center of a row by aligning them horizontally

I need help aligning three buttons in the same row and centered vertically. I want them to be aligned in the same way as the text "Select your attack:" Please advise on how to achieve this alignment. .prompt_user_to_choose { margin: 0; display: flex; ...

Steps for Customizing the Font Style of a Certain List Item Tag <li>

I'm struggling to find the right CSS selector to specifically change the font of just one list item. Here's the current structure: <ul id="menu-applemain class="x-nav> <li>One</li> <li>Two</li> <li>Three</l ...

JQuery Slider's Hidden Feature: Functioning Perfectly Despite Being Invisible

Having an issue with a jQuery slider on my local HTML page. The sliders are not showing up as intended. I want it to display like this example: http://jsfiddle.net/RwfFH/143/ HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery ...

Troubleshooting problems with encoding in Python Selenium's get_attribute method

Currently, I am utilizing Selenium with Python to crawl the drop-down menu of this particular page. By employing the find_elements_by_css_selector function, I have successfully obtained all the data from the second drop-down menu. However, when attempting ...

Exploring the diversity of perspectives through Angular

Currently, I am in the process of integrating multiple views in Angular to address the footer issue on a website that I am constructing. I want to ensure that the information I have been studying and attempting to replicate is accurate. Here is what I have ...

The Canvas element inside a Bootstrap modal is returning inaccurate mouse coordinates

I am currently troubleshooting an issue with a HTML5 canvas inside a Bootstrap modal. The canvas is designed to be a selection game where objects can be selected and manipulated. Everything works fine in the center of the 600x600px canvas, but there is an ...

What is the best way to make my div equal in height to its preceding div sibling?

I want my new div to match the height of the previous one. I'm using percentages for width and height to ensure it displays properly on mobile devices as well. I've tried setting the parent elements to 100% width and height based on suggestions f ...

What is the best way to eliminate the white space between two sections?

I am currently utilizing Bootstrap 4 along with a custom CSS stylesheet for my website structure. Here is the layout: <header> <!-- content in header (fixed) --> </header> <main role="main" class="container-fluid"> <!-- ...

Categorize Jekyll tags into two distinct groups

I am currently using Jekyll to construct a GitHub Pages website. The grid and column layout are powered by Bootstrap. When it comes to listing all the posts linked to a specific tag, I begin by sorting the tags and then listing all the posts associated wit ...