The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Text cut-off
RemPsyc
post Jan 16 2021, 01:18 PM
Post #1





Group: Members
Posts: 5
Joined: 16-January 21
Member No.: 27,730



Hi I'm new to HTML and actually doing my site via Hugo and markdown (https://remi-theriault.com/). But it's not possible to center text in markdown so I have to use HTML for my home page. I simply want my name centered on the screen with big font size. The code below seemed to work until someone pointed out that it didn't work on mobiles (font too big and left part text is cut off). This can be seen with a mobile simulator (e.g., https://ready.mobi/). What's wrong with my code then? How can I optimize it?

I tried using font-size: 4 em instead of 80 pixels but it's still not resizing.

I'm using Typora as text editor and the widget section at the top is not HTML, it's just the front header for Hugo. Otherwise, this is ALL my code for the homepage.

CODE
widget: blank
headless: true
design:
  # Choose how many columns the section has. Valid values: 1 or 2.
  columns: '1'

<style>
.container {
  height: 125px;
  position: relative;
  <! -- border: 3px; -->
}
.center {
  margin: 0;
  position: absolute;
  top: 100%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
</style>

<div class="container">
    <div class="center">
        <div style="text-align:center; margin: auto">
            <h1 style="font-size: 4em"> RÉMI THÉRIAULT, M.SC. </h1>
        </div>
    </div>
</div>

<div class="container">
  <div class="center"; style="text-align:center; font-size: 1.3em; margin: auto">
    <p> A PhD student's journey to making a difference in the world, one mind at a time </p>
  </div>
</div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 16 2021, 03:38 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



This what you want?

CODE
<style>
#container h1  { font-size: 4em }
#container h1, #container p   { text-align: center }
</style>



HTML
<div id="container">
<h1 style="font-size: 4em"> RÉMI THÉRIAULT, M.SC. </h1>
<p>
A PhD student's journey to making a difference in the world, one mind at a time</p>
</div>


You use way too much and too complicated CSS. Goes for the HTML too. And you have a fatal error in your CSS. The comment you have in the CSS is a HTML comment and it isn't allowed there. Nothing of the style sheet should be read after that, but maybe is in some browsers.

This.
CODE
<! -- border: 3px; -->


CODE

/* A CSS comment looks like this */
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RemPsyc
post Jan 16 2021, 03:57 PM
Post #3





Group: Members
Posts: 5
Joined: 16-January 21
Member No.: 27,730



QUOTE(pandy @ Jan 16 2021, 03:38 PM) *

This what you want?

CODE
<style>
#container h1  { font-size: 4em }
#container h1, #container p   { text-align: center }
</style>



HTML
<div id="container">
<h1 style="font-size: 4em"> RÉMI THÉRIAULT, M.SC. </h1>
<p>
A PhD student's journey to making a difference in the world, one mind at a time</p>
</div>


You use way too much and too complicated CSS. Goes for the HTML too. And you have a fatal error in your CSS. The comment you have in the CSS is a HTML comment and it isn't allowed there. Nothing of the style sheet should be read after that, but maybe is in some browsers.

This.
CODE
<! -- border: 3px; -->


CODE

/* A CSS comment looks like this */



Wow, so simple and elegant, thank you! I think we are almost there (with so little code, impressive). And thanks for the info about the comment! I've removed it now!

The code appears fine in my Typora editor preview but in the published online version the subtitle appears twice (and I can't seem to find any reason why it would!). See: https://remi-theriault.com/test1234/ EDIT: It was a problem with Typora, somehow I restarted it and then it appeared that the subtitle section appeared twice in the Typora editor (bug)! I deleted the second occurence and it works now! So only the issue below left (vertical alignment):

The second thing is: I'd also like to center the whole thing vertically but right now it's hanging at the top of the page.

This post has been edited by pandy: Mar 25 2021, 04:49 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 16 2021, 04:03 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I don't see that. Have you had it twice before? Maybe your browser has cached it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RemPsyc
post Jan 16 2021, 04:10 PM
Post #5





Group: Members
Posts: 5
Joined: 16-January 21
Member No.: 27,730



QUOTE(pandy @ Jan 16 2021, 04:03 PM) *

I don't see that. Have you had it twice before? Maybe your browser has cached it.


Turns out, it was an error on my part (see my previous edit), sorry! And thanks so much for your help!

Now, what would be the best way to vertically center this content? (without using the complicated code I had before!)

This post has been edited by RemPsyc: Jan 16 2021, 04:11 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 16 2021, 04:15 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE

Wow, so simple and elegant, thank you! I think we are almost there (with so little code, impressive).


Why, thank you. biggrin.gif
That's one of the advantages of doing it from scratch. You see, it doesn't need to be complicated. I didn't know about Hugo before, but it looks like some kind of WYSIWYG and that kind of editors usually generate a lot of unnecessary code. Another advantage is that if you later want to make changes to the page you don't need to deal with a verbose and seldom logic output that's very hard to understand. You understand what I wrote better than you understood what you first had, don't you? Just sayin'... happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RemPsyc
post Jan 16 2021, 04:22 PM
Post #7





Group: Members
Posts: 5
Joined: 16-January 21
Member No.: 27,730



QUOTE(pandy @ Jan 16 2021, 04:15 PM) *

Why, thank you. biggrin.gif
That's one of the advantages of doing it from scratch. You see, it doesn't need to be complicated. I didn't know about Hugo before, but it looks like some kind of WYSIWYG and that kind of editors usually generate a lot of unnecessary code. Another advantage is that if you later want to make changes to the page you don't need to deal with a verbose and seldom logic output that's very hard to understand. You understand what I wrote better than you understood what you first had, don't you? Just sayin'... happy.gif


Yes, I definitely understand better what you wrote than what I had fore sure haha! laugh.gif Though I just kind of picked bits of HTML/CSS from forum questions here and there to try to fix my issues; none of this was part of Hugo or Wowchemy base code. Wowchemy and Hugo are nice when you use their templates and premade widgets, but the tricky part, like you point out, is when you want to customize little things! So saves you time at first but now I realize learning HTML might be a good investment for cases like this.Thank you!

This post has been edited by RemPsyc: Jan 16 2021, 04:24 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 16 2021, 05:59 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Definitely is. Good luck with the site - and the HTML learning. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RemPsyc
post Jan 16 2021, 05:59 PM
Post #9





Group: Members
Posts: 5
Joined: 16-January 21
Member No.: 27,730



QUOTE

Why, thank you. biggrin.gif
That's one of the advantages of doing it from scratch. You see, it doesn't need to be complicated. I didn't know about Hugo before, but it looks like some kind of WYSIWYG and that kind of editors usually generate a lot of unnecessary code. Another advantage is that if you later want to make changes to the page you don't need to deal with a verbose and seldom logic output that's very hard to understand. You understand what I wrote better than you understood what you first had, don't you? Just sayin'... happy.gif


OK!!! I think I figured something out! All is horizontally AND vertically aligned, AND it also works on mobile! See: https://remi-theriault.com/

Here's the final code. Not as simple as your code but still simpler than what I had at first! Let me know if I can optimize it even more. Thanks!!

CODE
<style>
    .flex-container {
        height: 150px;
        display: flex;
    }
    .flex-item {
        padding: 6vw;
        margin: auto;
        text-align: center;
    }
</style>

<div class="flex-container">
  <div class="flex-item">
      <h1 style="font-size: calc(100% + 4.5vw)"> RÉMI THÉRIAULT, M.SC. </h1>
      <p style="font-size: calc(100% + 0.5vw)"> A PhD student's journey to making a difference in the world, one mind at a time</p>
  </div>
</div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 17 2021, 01:03 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I think it basically looks good, but it isn't vertically centered in all window sizes. And in a large enough window the Wowchemy blur is in the middle of the page, covered by the other text. The up arrow goes with it.

Vertical centering is a little complex. Personally I don't think it's worth bothering with most of the times. A suitable top margin will make it look good at any resolution, centered or not.


Attached Image

Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 04:48 PM