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

Is there a way to determine which radio button has been chosen using jQuery?

I'm trying to retrieve the value of the selected radio button using jQuery. Can anyone help with this? Currently, I am able to target all radio buttons like so: $("form :radio") But how can I determine which one is actually selected? ...

javascriptjqueryhtmljquery-selectorsradio-button

How should attributes be passed to the li element properly?

I am trying to transfer values from the database to the <li> tag. Can someone confirm if the approach below is valid and the proper way to do it? <li id='$current_row["RA_SUB_ID"]' component_name='$current_row["RA_SUB_NAME"]' ...

html

Generate a hard copy of the data table row without needing to view it beforehand

Here are some records from a table: +--------+---------+-------+----------+--------+ | Name | Address | Phone + Email | Action | +--------+---------+-------+----------+--------+ | Andy | NYC | 555 | <a href="/cdn-cgi/l/email-protection" cl ...

javascriptphpjqueryhtmlcss

jquery asynchronous image loading technique

Can images be loaded asynchronously while the page is loading? The images will only be displayed when a user clicks on a button, rather than immediately showing up. As a result, I am curious if it's feasible to preload the images in a cache so that th ...

htmlimagecssasynchronous

Tips for expanding a fabric canvas to match the entire width of its parent division

specific scenario I have a cloth canvas placed inside a main section. How can I expand the canvas to cover the entire width and height of its container? Here is what my current code looks like: <div class="design_editor_div"> &l ...

javascripthtmlcsshtml5-canvasfabricjs

Embed a script into an iframe from a separate domain

While experimenting, I attempted to inject a script inside an iframe element using the following method. However, since the child and parent elements do not belong to the same domain (and I am aware that XSS is prevented in modern browsers), I was wonder ...

javascripthtmliframeinject

The image being displayed is significantly wider than the corresponding HTML element

I'm attempting to display this webpage in PNG format using npm's wkhtmltox: <!doctype html> <html> <head> <meta charset="utf-8"> <style> html, body { padding: 0; width: 340px; } ...

javascripthtmlnode.jswkhtmltoimage

What is the best way to make my text scroll horizontally if the container is not wide enough?

Instead of overwhelming you with code, I'll just share a link to the types of animations I've come across so far. Although these options are close to what I'm looking for, none of them are exactly right. The one that comes closest to my vis ...

htmlcssmarquee

Retrieve the value of data from the dataset

I'm facing an issue assigning a string value to a variable depending on a boolean variable. After trying the following code: [Vue warn]: Error in data(): "TypeError: Cannot read property 'check' of undefined" TypeError: Cannot read proper ...

htmlvue.jsvue-componentvuetify.js

Loading animation reminiscent of a whirlpool, similar to the movement

In my quest for the perfect animation, I have scoured far and wide. Unfortunately, the one I found at http://jsfiddle.net/pedox/yed68/embedded/result/ is created using css, which many browsers do not yet support fully. I also explored , but found it to be ...

javascriptajaxhtmlloader

Which internet browsing engine does Android leverage for phonegap applications?

Currently, I'm working on incorporating CSS animations into a phone gap project. Surprisingly, the animations work flawlessly on an iOS device but encounter issues on my Android device. Strangely, elements like dashed borders are not even showing up. ...

csscordova

Styling components using classes in Material-UI

I recently started using material-ui and noticed that it applies inline styles to each component. After running a test with multiple instances of the same component, I realized that there was no CSS-based styling - only repeated inline styles were generate ...

javascripthtmlcssreactjsmaterial-ui

As you scroll, the opacity gradually increases, creating a dynamic visual

Struggling to replicate a feature on a website where images gain opacity as you scroll down? Check out this site for reference: . While my current code somewhat achieves this effect, I'm having trouble figuring out how to apply a darker opacity gradua ...

javascriptjquerycssif-statementscroll

It is not possible to submit a form within a Modal using React Semantic UI

I am working on creating a modal for submitting a form using React semantic UI. However, I am encountering an issue with the submit button not functioning correctly and the answers not being submitted to Google Form even though I have included action={GO ...

javascriptcssreactjssemantic-ui

What are some effective ways to analyze jQuery and JavaScript using web development tools?

I'm struggling to use web development tools to inspect the JavaScript on websites. It's challenging to identify which parts of a site are utilizing JS, unlike CSS or HTML where it's more visibly defined. Even when I attempt to delete some J ...

javascriptjqueryhtmlcssweb-developer-toolbar

Are there any other methods of using HREF in an <asp:Button> besides OnClientClick for invoking an inline div?

I decided to create a concealed <div> on the same page and tried calling it with href="#", which worked perfectly. However, when I attempted to use the same code in ASP.net, I encountered some issues with Javascript or other factors that prevented it ...

javascriptasp.nethtmlcsshref

Expanding text area size dynamically in Nuxt3 using Tailwind CSS

Is there a way to expand the chat input field as more lines are entered? I want the textarea height to automatically increase up to a maximum of 500px, and adjust the height of .chat-footer accordingly. Below is a snippet of my code. <div v-if="ac ...

cssvue.jstailwind-cssnuxtjs3tailwind-ui

Conceal a Tag with CSS

Looking to conceal a label using CSS <p class="half_form "> <label for="property_bathrooms">Bathrooms (*only numbers)</label> <input type="text" id="property_bathrooms" size="40" class= ...

csslabel

Creating a chat interface with chat bubbles in React JS can be done by implementing components such as Message

Having some JSON data stored in dummyData, I am seeking guidance on how to position chat bubbles on the left and right based on the direction. My framework of choice is Material UI along with the context API. The attached image serves as a visual reference ...

javascriptcssreactjsmaterial-uijsx

Ways to distinguish between two div elements that have scroll bars and those that do not

I created a div with CSS styling. .comment-list { margin: 20px 0; max-height: 100px; min-height: 100px; overflow-y: scroll; width: 100%; background-color:#000; } Here is the HTML code for the div: <div class="comment-list"> </div> When the ...

javascriptjqueryhtmlcss