• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Centre not working

Participant ,
Oct 05, 2022 Oct 05, 2022

Copy link to clipboard

Copied

Hi everyone would really appreciate some insight as to why this code is not working.

See screenshot.  Thanks 🙂

 

<!--Center Everything Start-->

<div class="center">
<h2 class="smallerh2Centre" >Nine-bot Segway Scooter</h2>
<br>
<img src="images/scooters/Ninebot-E-Scooter-500.png" width="419" height="445" alt="Sunrise E-Scooter" class="img-responsive" />
<h3 class="lowerCase" >Just what you need for that Cable Beach sunset!</h3>
<h4 class="lowerCase">From $50 per day (24 hours)</h4>
</div>
<!--Center Everything End-->

 

THE CSS

.center {
height: 500px;
display: flex;
align-items: center;
justify-content: center;}

Views

343

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Oct 05, 2022 Oct 05, 2022

Flexbox is a single dimension layout element. It can be either in a  horizontal or a vertical vertical direction. The default is horiontal. To change it to a vertical direction, you will need to add 

 

flex-direction: column;

 

as in 

 

.center {
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

 

Votes

Translate

Translate
Community Expert ,
Oct 05, 2022 Oct 05, 2022

Copy link to clipboard

Copied

Flexbox is a single dimension layout element. It can be either in a  horizontal or a vertical vertical direction. The default is horiontal. To change it to a vertical direction, you will need to add 

 

flex-direction: column;

 

as in 

 

.center {
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 05, 2022 Oct 05, 2022

Copy link to clipboard

Copied

OMG thank you so much 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 05, 2022 Oct 05, 2022

Copy link to clipboard

Copied

Sorry wanted to break this div up with a white background but got this, see attached.

 

How do I make the background full width?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 05, 2022 Oct 05, 2022

Copy link to clipboard

Copied

Sorry forgot to send CSS

 

.center {
height: 800px;
background-size: cover;
margin: 0;
width: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #fff;
padding: 30px 0px 30px 0px;}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 05, 2022 Oct 05, 2022

Copy link to clipboard

Copied

and woops again but realised I put vh instead of vw but now I get this

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 05, 2022 Oct 05, 2022

Copy link to clipboard

Copied

quote

and woops again but realised I put vh instead of vw but now I get this


By @broomeGirl

 

 

Why don't you post the code here for the whole page + the css, that way you might get more answers?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 05, 2022 Oct 05, 2022

Copy link to clipboard

Copied

BenPleysier_0-1665011524632.png

This is my interpretation of what has happened:

1. the area between the two green lines is the width of the container or wrapper. 

2. the CSS starts the `,center` element at the left border container.

3. because the width of  `.center` has been set at 100% of the width of the screen (100vw), `.center` overflows the right border of the container.

 

What I would to fix this:

1. end (e.g. </div>) the existing container prior to the `.center` element

2. restart (e.g. <div class="container">) the existing container after the `.center` element.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 09, 2022 Oct 09, 2022

Copy link to clipboard

Copied

You are a legend!  There was a missing div before the Center Container.  The section is now full width 🙂 Now I must have another one somewhere because the background colour (orange) is bleeding underneath the image above of the scooter and also under the copywrite notice, along with some white.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 05, 2022 Oct 05, 2022

Copy link to clipboard

Copied

See if this helps you.

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 09, 2022 Oct 09, 2022

Copy link to clipboard

Copied

Thanks so much Nancy, I have solved the first part of the problem with the closing of the div 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 10, 2022 Oct 10, 2022

Copy link to clipboard

Copied

LATEST

You can achieve desired results with less code using CSS Grids instead of Flexbox.

Give it a try.  It's good to know both.

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines