What methods are available to optimize my text for various screen sizes and adjust its position correctly?

Is there a way to make my text adjust to different screen sizes and remain fixed in position?

I would like my text to be centered and have its position fixed

Did I do the right thing by centering the text or is there a better way? Also, how can I solve my issue with positioning?

Thank you for your help!

Here is my HTML:

<div class="text-center">

    <h2>Protein for healthy muscle and bone</h2>

    <strong>proteins in the diet contribute significantly to the production of energy for the body.</strong>

</div>

And here is my CSS code using Bootstrap 4:

h2, h4, p, strong, small {
    color: oldlace;
}

div {
    position: absolute;
    top: 10%;
    margin-left: 25%;
    width: 700px;
}

https://i.sstatic.net/4GQQX.jpg

https://i.sstatic.net/Drel2.jpg

htmlcssbootstrap-4

Answer №1

After making the adjustment from width: 700px to min-width: 700px, and including a width: 50% property within the div element, I would appreciate your feedback on this solution:

body {
    background: black;
    margin-left: auto;
    margin-right: auto;
}

h2, h4, p, strong, small {
    color: oldlace;
}

div {
    position: relative;
    top: 10%;
    min-width: 700px;
    width: 50%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
<div class="text-center">

    <h2>Protein for healthy muscle and bone</h2>

    <strong>proteins in the diet contribute significantly to the production of energy for the body.</strong>

</div>

In addition to the changes mentioned above, I have also updated the margin property to text-align: center. This approach offers a more streamlined solution without requiring intricate CSS adjustments.

  • Edit: I have introduced these properties for body and div: margin-left: auto; and margin-right: auto;

The modifications seem to be effective now

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

Custom Tooltips arrow is not receiving the CSS styling

I have implemented ReactTooltip from the ReactTooltip library You can view an example here Component Setup <ReactTooltip className={styles.customTheme} id={id} place={placement} effect="solid"> {children} </ReactTooltip> Stylin ...

javascriptcssreactjssasstooltip

The JQuery keydown event will only be activated once unless another action occurs

I am attempting to display a font awesome '?' symbol after each element that has the ".info" class when the user presses and holds the "alt" key. It seems to be functioning properly, but when I release the "Alt" key and try to press it again, not ...

javascriptjqueryhtml

Increase the Step Size of an HTML Number Input by Holding Down the Time

Is there a way to implement increasing increment/step size for number inputs in HTML based on how long the user holds the stepper arrows? For instance, starting at step size=1 and gradually ramping up to larger increments like 5, 10, 20, etc. after holdin ...

javascripthtml

Why is the submenu page scrolling up every time I open it?

Currently, I am working on a mobile menu that reveals a submenu when an item is clicked. The issue arises when the page is scrolled down; upon opening or closing the submenu, the page automatically scrolls back to the top. This scrolling problem only occu ...

javascriptjqueryhtmlcss

Eliminate parameters from the image source URL

I'm struggling to eliminate the parameters that are hindering the animation of my gif. Here's the code for the gif: <img src="/asset/News/6001/gif-anim.gif?thumbnail_width=2000&amp;thumbnail_height=500&amp;resize_type=CropToFit" heigh ...

jqueryhtmlimageparameters

Tips for creating space between flex elements in Bootstrap without disrupting the layout breakpoints

<div class="row"> <div class="col-sm-6" style="margin-right: 1px;">CONTENT</div> <div class="col-sm-6"> CONTENT</div> </div> When adding a margin to the first element, it causes th ...

htmlcssflexboxbootstrap-5

Display the jQuery validation message in the final td cell of the table

JavaScript Animation Library rules:{ gender: { required: true }, }, messages:{ gender: { required: "Please indicate your gender" }, }, errorPlacement: function (error, element) { if (element.attr("type") == "radio") { ...

javascriptjqueryhtml

Ensure that the header remains fixed to the top of the page

How can I keep my header at the top of the page instead of in the middle? `header { position: sticky; top: 0; } <!--body { display: flex; justify-content: center; align-items: center; } h1 {font-family: sans-serif;} h1 {text-align: centre; ...

htmlcssheader

Tips for repairing the gray margins on the right and left sides of a webpage

Currently utilizing Bootstrap 5 and incorporating columns within the framework. However, encountering an issue where there is black space on the right side of the screen and certain content disappearing on the left side as demonstrated here. Here is the c ...

htmlcssbootstrap-5

The jQuery functions properly offline, but fails to load when connected to the

I am encountering an issue with the following script: <script type="text/javascript"> $.getJSON("http://api.twitter.com/1/statuses/user_timeline/koawatea.json?count=1&include_rts=1&callback=?", function(data) { $("#headertweet") ...

javascriptjqueryhtmljson

Is there a way to automate testing for my web application bundled with webpack against FUOC?

After creating a React + Redux web app bundled with webpack, I encountered a bundling error that caused my website to display flash of unstyled content (FUOC) behavior. Certain components did not inject their CSS into the server response, resulting in pa ...

cssnode.jstestingwebwebpack

Tutorial on creating a loop for a function based on a specific condition

I have created two different div classes named box and box2. The box2 class can be dragged and dropped into any of the three box classes. Each box contains randomly chosen values from an array, while box2 contains its corresponding image for display. When ...

javascriptjqueryhtml

Including a .css file in ejs

I'm currently developing an application using Node.js (express) with EJS, and I'm facing an issue while including a .css file in it. When I tried the same setup as a standalone HTML-CSS project, it worked perfectly fine. How can I include the CSS ...

cssnode.jsexpressejs

Conceal the element at all times

I'm facing a challenge with a paragraph element that is dynamically filled with content using Javascript. I need to hide the element whenever it doesn't have any text within it. However, I want to avoid using setTimeout or setInterval for this ta ...

javascriptjquerycsshtml

There's no sound of success when you click on the tic-tac-toe board

I'm encountering an issue with my code where the tiles are not clickable and nothing is being displayed. I suspect that the problem lies in this section: tiles.forEach( (tile, index) => { tile.addEventListener('click', () => userAction ...

javascripthtmlcsstic-tac-toe

Struggling to correct alignment issues with buttons within a container using Bootstrap 5

I'm struggling with a piece of html code where everything looks good except for the placement of the button. It seems to be too far away from the container. Here's the code snippet: <div class="container-fluid mt-1 d-flex align-items-cent ...

htmlbootstrap-5

The validation process fails when the button is clicked for the second time

When adding a username and email to the userlist, I am able to validate the email on initial page load. However, if I try to enter an invalid email for the second time and click the add button, it does not work. <form id="myform"> <h2>Ad ...

javascriptjqueryhtmlemail

The overflow:hidden property prevents me from being able to scroll down the rest of my webpage

@import url('https://fonts.googleapis.com/css?family=Indie+Flower|Lobster|Open+Sans+Condensed:300|Roboto+Condensed&display=swap'); * { margin: 0; padding: 0; } html,body { height: 100%; width: 100%; margin: 0px; padding: 0px; ...

htmlcss

Unable to modify the innerText of an element within a callback function

I'm working on creating a dynamic "reset" button that switches its text message back and forth in a loop. The first click changes it from "Reset" to "Are you sure?" and the second click changes it back to "Reset." However, I am having trouble updating ...

javascripthtmlbootstrap-5

Preventing unclickable Bootstrap checkboxes with identical IDs

I have a checkbox setup like this <div class="form-group"> <div class="col-sm-3"> <div class="checkbox clip-check check-primary"> <input type="checkbox" value="machin ...

htmlbootstrap-4