Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML Adding Padding to Text Block - desktop only

lightmove

New Coder
Hi there, I am a coding novice/DIY-ing my company's website and am wondering if anyone can help me find the simplest way to make this TEXT show up in the middle of the page (vertically) with margins on both sides when viewed on a desktop and no margins on mobile. I only have access to place html code... no CSS/backend stuff. I tried offset, but it just pushed the sentence off the screen on mobile. THANK YOU! 😊 🙏

This is what I currently have:
[CODE lang="html" title="Sentence"]<p style="text-align: center;">SENTENCE THAT NEEDS TO WRAP AROUND AND SQUISHED TO THE CENTER OF THE PAGE RATHER THAN EXTENDING ONE SIDE OF THE PAGE TO THE OTHER ON DESKTOP</p>[/CODE]
 
This is what I understand since you did not mentioned your layout.
HTML:
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Center</title>
</head>

<body>
    <div class="main" style="width:100%; height:100vh;display:flex; justify-content:center; align-items:center">
        <p>TEXT ON DESKTOP SCREEN</p>
    </div>
</body>

</html>
 
This is what I understand since you did not mentioned your layout.
HTML:
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Center</title>
</head>

<body>
    <div class="main" style="width:100%; height:100vh;display:flex; justify-content:center; align-items:center">
        <p>TEXT ON DESKTOP SCREEN</p>
    </div>
</body>

</html>

Thank you so much for your help! You're right I didn't do a good job of explaining what I was trying to do. Sorry about that. I'm using Shopify's Out of the Sand Box Parallax Theme. I'm placing a custom html section on the home page.

My goal is for the sentence to only expand ~70% of the width on desktop and 100% on mobile. In other words the text should wrap in the middle of the section - only on desktop. I've added 3 screen shots that show: (1) What appears when I placed your suggested code. (2 ) What I want it to look like on desktop using margins (3) What it looks like on mobile using my same "margins" code
 

Attachments

  • Screen Shot 2021-07-11 at 10.27.47 AM.png
    Screen Shot 2021-07-11 at 10.27.47 AM.png
    473.8 KB · Views: 1
  • Screen Shot 2021-07-11 at 10.28.37 AM.png
    Screen Shot 2021-07-11 at 10.28.37 AM.png
    465.8 KB · Views: 1
  • Screen Shot 2021-07-11 at 10.31.25 AM.png
    Screen Shot 2021-07-11 at 10.31.25 AM.png
    297.8 KB · Views: 1
Than add width 70% to p tag -
HTML:
<p style="width:70%">--------- PLACED SUGGESTED CODE HERE. THAT STILL EXPANDS TO THE FULL WIDTH OF THE SCREEN ON DESKTOP ---------</p>
 
Than add width 70% to p tag -
HTML:
<p style="width:70%">--------- PLACED SUGGESTED CODE HERE. THAT STILL EXPANDS TO THE FULL WIDTH OF THE SCREEN ON DESKTOP ---------</p>
looks like it adjusted the text on both the mobile and desktop view -- the same way that adding my margins code did. Maybe I placed it incorrectly?
 

Attachments

  • Screen Shot 2021-07-11 at 11.43.17 AM.png
    Screen Shot 2021-07-11 at 11.43.17 AM.png
    207.8 KB · Views: 1
<!DOCTYPE html>

<html >

<head>

<title>Text in Center</title>
</head>

<body>
<div class="main" style="width:100%; height:100vh; justify-content:center; align-items:center; display:flex; ">
<p>You can write any text you want</p>
</div>
</body>

</html>
 
Last edited by a moderator:
For this to work properly you really need to use @media try this at the top of your page in your header.
lets also edit your p tag to make it a bit easier to use

HTML:
<p class="ptester">
<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">  
    <style>

      .ptester {
        padding 0% 10%;
        text-align: center; 
        background-color:blue;
       
      }
     
      @media screen and (max-width: 200px) {

          .ptester {
            padding 0%;
            background-color:green;
          }
      }
    </style>
 
  </head>
 
  <body>
 
      <p class="ptester">SENTENCE THAT NEEDS TO WRAP AROUND AND SQUISHED TO THE CENTER OF THE PAGE RATHER THAN EXTENDING ONE SIDE OF THE PAGE TO THE OTHER ON DESKTOP</p>
 

  </body>
</html>

Here is also a codepen, So basically when it reached 200px it changes to blue and adds a padding but when it goes under a screen width of 200px it loses the colour and padding, i added colour just so you can see it working :D

 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom