Aligning text appears fine in a full screen browser, but it can cause inconsistencies in appearance when resizing the window or viewing on a phone, as demonstrated in the

Hi there, I'm new to web design and I'm struggling to make my site look good on all screen sizes.

I've created a page that should work well on any screen size: https://jsfiddle.net/garixakor/j0xck25v/1/

I attempted to center one of the paragraphs to improve its appearance on desktop view. However, this caused issues with text alignment on smaller screens or when resizing the browser window.

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 20em
}  

<p class="blocktext">Step back in time etc etc....

You can see the problematic change in this fiddle: https://jsfiddle.net/garixakor/5Lo4rtkc/

I'm considering using media queries to apply centering only for screens 992px wide or larger. If anyone has alternative solutions or advice on how to approach this problem, I would greatly appreciate it.

htmlcssmedia-queriesmargincentering

Answer №1

To prevent the text container from overflowing outside the viewport and not wrapping the text when the screen width is smaller than 20em, try adding max-width: 100%.

Setting max-width to 100% ensures that the text container cannot be wider than the parent container.

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 20em;
    max-width: 100%;
}

P.para {
    margin-left: auto;
    margin-right: auto;
    width: 70em;
    max-width: 100%;
}

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

Using PHP to display arrays on the screen

Currently, I am working on manipulating an array in my code. I have already accessed the array and begun the process of displaying its contents using the following code snippet: <html> <?php $file=fopen("curr_enroll_fall.csv", "r"); $records[]=fg ...

phphtmlarraysmatrix

Choose options from the month dropdown menu using Selenium WebDriver

Presently focused on working with Selenium WebDriver and Java. I am attempting to pick an option from a date picker form. When trying to select the month from the dropdown of the date picker, an error is displayed stating Unable to locate element: {"method ...

javahtmlseleniumselenium-webdriver

How come outerHTML retrieves <!-- --> comments?

I came across a jsfiddle link that showcases the collection of outerHTML for elements with a class='active'. Surprisingly, even when certain parts of the HTML are commented out like this: <!-- <div>'Some inner text'</d ...

javascriptjqueryhtmlouterhtml

How do I repeatedly invoke a function in JQuery that accepts two different arguments each time?

I have a collection of folders, each containing various images. The number of pictures in each folder ranges from 8 to 200. Folders are numbered from 1 to 20 and the images within them are also labeled numerically. My goal is to aggregate all these images ...

javascriptjqueryhtml

Can footer.html be omitted from the base.html file when extending it for Django?

I'm using base.html as my template which includes {% include 'footer.html' %} in every page. However, there are certain pages where I don't want the footer to appear. Is there a way to exclude the footer on specific pages using some sor ...

htmldjango

Looking to create circular text using HTML, CSS, or JavaScript?

Is there a way to generate curved text in HTML5, CSS3, or JavaScript similar to the image linked above? I've experimented with transform: rotate(45deg); but that just rotates the text without curving it. Additionally, when using Lettering.JS to curve ...

javascriptcsstext

I encountered an issue where my style.css file was not properly linking to my HTML code. Whenever I saved the file, it would open

I'm a beginner in the world of HTML/CSS. When I save my style.css file, it shows up as a Notepad+ settings file and doesn't seem to work with my HTML. Can anyone advise me on what steps I should take? ...

htmlcss

Incorporate a course within the conditional statement

Currently, I'm working on the development of an input site and one of my goals is to highlight empty fields. My plan is to check if a field is empty using an if statement and then apply a specific class that will serve this purpose. This is the JavaS ...

javascriptjqueryhtmlcss

Order of flexbox items when placed within separate divs?

Looking to rearrange the order of items using flexbox, but hitting a roadblock because one of the items I want to reorder is in a different div and not a direct child of the same parent as the other items. <div class="wrapper"> <div class="some ...

htmlcssflexbox

What caused Safari to only show half of the page?

Whenever I browse my website using Safari, I noticed that if the total size of the content on the first page is less than 100vh, Safari ends up cutting off half of the page. To fix this issue, I added a CSS rule in the body setting min-height to 110vh wh ...

cssreactjsnext.jssafari

Obtain the href using a combination of xpath and id

I need to extract the href links for 9 search results from this specific website. The xpath and selectors for the first, second, and third items are as follows: '//*[@id="search-results"]/div[4]/div/ctl:cache/div[3]/div[1]/div/div[2]/div[2]/div[2]/p[ ...

pythonhtmlseleniumxpath

The GitHub Pages website is not displaying exactly like it does when running locally with a live server

Currently in the process of creating a compact website where users can input an anagram and receive all potential words that can be formed from it. Additionally, upon receiving these words, there is an option to click on one for its definitions. The site ...

javascripthtmlcssgithub-pages

Uploading large files on Vuejs causes the browser to crash

Whenever I try to upload a file using my browser (Chrome), everything goes smoothly for files with a size of 30mb. However, if I attempt to upload a file that is 150mb in size, the browser crashes. The server's maximum upload size has been configured ...

javascriptphphtmlvue.jsinput

Ensure that only numerical values in decimal form are permitted when entering data in Angular

How can I restrict user input to only decimal values? Here is the HTML code for my input field: <label for="conversion-factor">Conversion Factor:</label> <input type="text" class="form-control form-control-sm" id="conversion-factor" ...

javascripthtmlangulartypescript

Creating a dynamic row in an HTML table with elements inside

I have an array of numbers in my angular application that I need to display in an HTML table without truncating them and ending with a comma. Each row should display a maximum of 20 values. How can this be achieved? The array looks like this - let arr ...

htmlangular

The grid feature in the Bones theme is malfunctioning and causing issues

I am currently using the Bones theme from Themble, which has a grid system in its design. I attempted to apply this grid system to the header of my website in order to transform menu items into icons on mobile devices and display the full menu on desktop s ...

htmlcssgridmenuitem

Troubleshoot: Issue with Navbar Dropdown Expansion on Bootstrap Sass 3.3.6 with JavaScript

Beginner: Bootstrap Sass 3.3.6 - Incorporating Javascript - Issue with Navbar Dropdown Not Expanding application.html.erb Head: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> ...

javascriptcssruby-on-railstwitter-bootstrapsass

Modal overlays should consistently appear behind the loading animation

When processing something and using overlays for loading, everything works fine until I use it for a modal. The issue arises when the overlays appear behind the modal instead of in front. Is there a way to bring the overlays to the front of the modal? Bel ...

css

Text Embedded in Object HTML

Feeling stuck and need some guidance. My goal is to insert text inside hexagon shapes, but I'm having trouble making it work. I can change the background-color of the hexagons, add URLs, etc., but adding text seems to be a challenge. Check out the co ...

html

Malfunctioning carousel

I've been attempting to set up a carousel, but it's not functioning properly. I'm unsure of where the issue lies. The navbar section is working fine, but the carousel isn't appearing at all. Should the carousel be placed above the navba ...

jqueryhtmltwitter-bootstrap