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

positioning-2

Enthusiast ,
Sep 14, 2019 Sep 14, 2019

Copy link to clipboard

Copied

Hi,

 

Clicking the far-right icon in <header> opens Contact Me.

 

I set margin to .form-container for the vertical positioning of the green box.

It looks working on PC. But it doesn't work on iPhone.

 

Is there any solution?

 

I tried 

main {

             display: flex;

             align-items: center;

         }

But it doesn't work.

 

https://priceless-kalam-5060c1.netlify.com/

 

Hosun Kang

 

Q_Dw_81_php.png

 

 

 

 

TOPICS
Code

Views

400

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

LEGEND , Sep 14, 2019 Sep 14, 2019

Try the css combination below:

 

The height: 97vh; compensates for the fixed footer, which takes up a bit of vertical space.

You have obviously somewhere added padding on the 'body' element which was accounting for a bit more vertical space so I have removed the padding on the body element as well in the css styles below:

 

 

 

 

.page-wrapper {
display: flex;
flex-direction: column;
height: 97vh;
}
main {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
}
body {
padding: 0;
}

 

 

 

 

 

 

Votes

Translate

Translate
LEGEND ,
Sep 14, 2019 Sep 14, 2019

Copy link to clipboard

Copied

Try the css combination below:

 

The height: 97vh; compensates for the fixed footer, which takes up a bit of vertical space.

You have obviously somewhere added padding on the 'body' element which was accounting for a bit more vertical space so I have removed the padding on the body element as well in the css styles below:

 

 

 

 

.page-wrapper {
display: flex;
flex-direction: column;
height: 97vh;
}
main {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
}
body {
padding: 0;
}

 

 

 

 

 

 

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 ,
Sep 14, 2019 Sep 14, 2019

Copy link to clipboard

Copied

LATEST

That is the problem when too many different views are relayed to you. In one of my replies I gave you a very simple way to push the Footer to the bottom of the viewport if the content was not long enough. I now see a different approach where a  fixed footer is mentioned and all is undone.

 

Have a look at a simplified version of pushing the the footer down:

 

<!doctype html>
<html>
<head>
<base href="/aa/">
<meta name="ac:base" content="/aa">
<meta charset="UTF-8">
<title>Untitled Document</title>
<style> /* better placed in external document */
* { /* use the reset method instead */
margin: 0;
padding: 0;
}
html {
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header { /* for demo only */
background: green;
height: 250px;
}
main {
flex: 1 0 auto;
background: yellow; /* for demo only */
}
footer { /* for demo only */
background: green;
height: 80px;
}
</style>
</head>
<body>
<header>HEADER</header>
<main>MAIN CONTENT</main>
<footer>FOOTER</footer>
</body>
</html>

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