How to vertically align text in a...

User 2886045 Photo


Registered User
38 posts

Hmm. I don't see anything that crazily different.

@media screen and (min-width: 40rem) {
.container.container-3 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
float: none;
clear: none;
-ms-flex-align: center;
vertical-align: middle;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
-webkit-transition-property: none;
-moz-transition-property: none;
-o-transition-property: none;
transition-property: none;

-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
}

That's my code for my column.
User 2699991 Photo


Registered User
5,397 posts

DragonClaw wrote:
Hmm. I don't see anything that crazily different.

@media screen and (min-width: 40rem) {
.container.container-3 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
float: none;
clear: none;
-ms-flex-align: center;
vertical-align: middle;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
-webkit-transition-property: none;
-moz-transition-property: none;
-o-transition-property: none;
transition-property: none;

-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
}

That's my code for my column.


attach the project file or a link to it in dropbox if it's too big
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2699991 Photo


Registered User
5,397 posts

ok i got it
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2699991 Photo


Registered User
5,397 posts

The problem is (i'm assuming it's the text next to the image of the girl) you have two columns and more padding in the second column than a center forward AFL player.

If you have time I will make a short video for a better way to do that,, but could take me an hour (very slow internet here for uploading the video, if you can hang on then you will be able to fix it easier than my trying to explain in words.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2886045 Photo


Registered User
38 posts

let me try and fix it with what You've said, I don't want you to go to the trouble
User 2886045 Photo


Registered User
38 posts

Ugh, I don't want you to have to do this. But I was hoping to have this page complete today. I need 2 things. This text vertically centered (It would work if it was all 1 collum if the picture of the girl scaled with the page properly) and turning that icon link thing into a working button menu. That's it. I've been working on this for (2?) weeks?
User 244626 Photo


Registered User
811 posts

DragonClaw wrote:
Ugh, I don't want you to have to do this. But I was hoping to have this page complete today. I need 2 things. This text vertically centered (It would work if it was all 1 collum if the picture of the girl scaled with the page properly) and turning that icon link thing into a working button menu. That's it. I've been working on this for (2?) weeks?

DragonClaw I would agree. I would only use one column for this. I would add a container to the single column (reset single column to 12 spans). Move the picture and text inside the container. I always think of using flex this way. The container holding the items needs to be set to Flex and items center etc. Then the items inside the container need to have each one(s) width set to a percentage to add up to just below 100 %. (2) items on a row.....49.5 % each. (3) items on a row....33.3 % each and so on.
Bootstrap 5 CSS Grid.
User 2886045 Photo


Registered User
38 posts

I finally got the girl exactly how I wanted her and now I will have to restart. And new problem. My blue review box at the bottom doesn't scale right anymore. I had it. I don't know what happened. It's like playing whack a mole with problems :o
User 2886045 Photo


Registered User
38 posts

I think i fixed the blue box again, but now I can't get the flex to work. Not related to each other, just tinkering with the settings. I can't get this flex box to work. I see it in the column, but not the container. I have them both set to 49.9%. I've tried changing various flex settings, but to no avail.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.