My footer is in fixed position and I am seeing the same view on every device. I also want to fix the LinkedIn logo in white div and orange div above it. So that my website will have same view on every device. but I am not to fix them. Can anyone please help?. I have been trying from last 2 weeks.
I am not able to add my codes here. so attaching the same in screenshot
html code
css code
This how my website currently looks like//i.stack.imgur.com/VNVDN.jpg
This is how I want my website to look like//i.stack.imgur.com/VNVDN.jpg
Actually I made an easy template of what you need. It is pretty simple so I am sure that you will get the point. Please ask me whatever you want.
HTML
<div class="footer-wrapper">
<div class="orange-container">
</div>
<div class="social-container">
<img src="#">
</div>
<div class="black-container">
<p>text text text</p>
<p>text text text</p>
</div>
</div>
CSS
.footer-wrapper {
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
position: relative;
bottom: 0;
}
.orange-container {
width: 100%;
height: 40px;
background: orange;
}
.social-container {
width:100%;
display: flex;
justify-content: center;
}
.social-container img {
background: red;
width: 30px;
height: 30px;
}
.black-container {
width: 100%;
background: black;
padding-top: 1rem;
color: white;
display: flex;
justify-content: center;
flex-direction: column;
}
.black-container p {
text-align: center;
margin: 0;
}
It is better way to use display:flex or display:grid when you want to center something. Padding is used to make small spaces. Also with the display flex or grid you can easily handle the responsive view of your website pretty easy.
Please I am also advising you to check how to make your questions good Click Here
I hope my answer will be helpful for you, and again if not, don't hesitate to ask anything :)
You can use flexbox. And assign to the main part flex-grow.
* {
padding: 0px;
margin: 0px;
}
.w {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vh;
}
.header {
background: orange;
padding: 5px;
}
.main {
flex-grow: 1;
}
.footer {
background: black;
height: 40px;
text-align: center;
color: white;
padding: 5px;
}
<div class="w">
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
</div>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 21 days ago.
Improve this question
I want to have text on the left side of the useres screen and on the right side and Image. Look at the prototype i provided![enter image description here][1]
I can't find a solution pls help
I cant upload images, but heres a link to it
https://photos.app.goo.gl/97ZLoYcLBsVsRnjc6
I tried to do it with floats. But it didnt work out, since the button would just be way to far away from the text. The Image shouldt take away any space, it should display on the right side
We can use flex in this case
Refer CSS flex for further changes >> CSS Flex
* {
padding: 0;
margin: 0
}
.container {
display: flex;
justify-content: space-around;
align-items:center;
background-color: black;
color: white;
height:100vh
}
.container-button {
border: none;
background-color: white;
color: black;
padding: 0px 20px;
}
.container-img {
height: 100px;
width: 200px;
}
<div class="container">
<div class="container-text">
<h2>Hello World</h2>
<h4>This is some Text</h4>
<button class="container-button">button</button>
</div>
<img class="container-img" src="https://via.placeholder.com/200x100/FFFFFF/000000">
</div>
You can do something like this:
.container{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.container-right-side img{
margin-right: 2rem;
max-width: 60vw;
width: 100%;
}
.container-left-side{
margin-left: 2rem;
}
#media screen and (min-width: 0px) and (max-width: 600px){
.container{
flex-direction: column;
}
.container-left-side{
margin-left: 0;
}
}
<div class="container">
<div class="container-left-side">
<h2>Hello World</h2>
<h4>This is Some text</h4>
<button>button</button>
</div>
<div class="container-right-side">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
</div>
</div>
You can use something like this:
.container {
display: flex;
justify-content: space-between;
padding: 70px;
background-color: black;
}
.text {
display: flex;
flex-direction: column;
justify-content: center;
/* align-items: center; */
width: 50%;
padding: 50px;
color: white;
}
.image {
width: 50%;
}
img {
width: 100%;
height: auto;
border: 1px solid white;
}
button {
max-width: 100px;
}
<div class="container">
<div class="text">
<h1>Hello World</h1>
<p>This is Some Text</p>
<button>Button</button>
</div>
<div class="image">
<img src="https://via.placeholder.com/300 " alt="Image">
</div>
</div>
I'm having problems with a behavior I have never seen before. I added the code because Stack Overflow is asking me to put it in my post but I would recommend you go on the Codepen to try it for yourself.
HTML:
<html>
<body>
<div class="card">
<div class="name">Testing and Testeronintendo</div>
<div class="star">X</div>
</div>
</body>
</html>
CSS:
body {
width: 200px;
margin: 0;
background: green;
border: 5px solid black;
height: 100vh;
}
.card {
padding: 10px;
max-width: 300px;
background: yellow;
display: flex;
justify-content: space-between;
}
.name {
background: red;
}
Here is an image with a hand drawn example of the behavior I expect/need: https://i.stack.imgur.com/2tWRH.png
Explanation: I don't want the red background to extend all the way to the X, I simply want it to wrap cleanly around the text of the div.
Just add the minimum content of width to your name class. As far as I know by reading your question I understand that you want to make the red background as it's needed.
body {
width: 200px;
margin: 0;
background: green;
border: 5px solid black;
height: 100vh;
}
.card {
padding: 10px;
max-width: 300px;
background: yellow;
display: flex;
justify-content: space-between;
}
.name {
background: red;
width: min-content;
padding: 4px;
}
<html>
<body>
<div class="card">
<div class="name">Testing and Testeronintendo</div>
<div class="star">X</div>
</div>
</body>
</html>
I am building a website layout as an exercise, using Flexbox. But elements collapse into each other when I put the website through responsive test.
Using Flexbox, I tried to build a responsive website, where it would self-adjust ratios when you play with the dimensions of the browser. The horizon test was a pass, but when I opened the inspect tools, the "vertical view port" became smaller and the blue 'Section' and the fuchsia 'Footer' all collapsed into each other, because the vertical aspect of the website is not working as expected.
I tried to change and play around with different size units such as {%, em, vh, vw} to get the elements to readjust their sizes in relation to each other, but it still collapses into each other when I
I uploaded the code: {HTML & CSS} to Codepen as well.
:root{
text-align: center;
}
body{
background-color: gray;
height: 100vh;
}
.container{
margin-left: 1em;
margin-right: 1em;
background-color: gray;
display: flex;
flex-direction: column;
}
.headerAndNav{
}
.header{
background-color: navajowhite;
border: 0.5em solid gray;
}
.nav{
background-color: powderblue;
border: 0.5em solid gray;
}
.sectionAndAside{
display: flex;
flex-direction: column;
align-items: stretch;
text-align: center;
}
.header{
height: 8vh;
}
.nav{
height: 8vh;
}
.middle{
display: flex;
flex-direction: row;
/* background-color: red; */
border: 0.5em solid gray;
height: 40vh;
}
.aside{
background-color: powderblue;
width: 50%;
margin: 0.5em 0 0.5em 0.5em;
}
.section{
color:red;
display: flex;
flex-direction: column;
background-color: blue;
width: 50%;
margin: 0.5em 0.5em 0.5em 0;
padding-top: 3em;
}
.article{
background-color: yellow;
height: 100vh;
margin: 10px;
}
h1{
background-color: bisque;
}
h2{
background-color:gold;
}
h3{
background-color: khaki;
}
.hClass{
background-color: gray;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 10vh;
margin: 1em;
}
.p{
background-color: lightcoral;
height: 10vh;
margin: 1em;
}
.footer{
background-color: fuchsia;
border: 0.5em solid gray;
height: 10vh;
}
<div class='container'>
<div class='sectionAndAside'>
<div class='header'>header</div>
<div class='nav'> nav</div>
</div>
<div class='middle'>
<div class='section'>section
<div class='article'>article
<div class='conta'>
<div class='hClass'>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
</div>
<div class='p'>
<p>this is p</p>
</div>
</div>
</div>
</div>
<aside class='aside'>aside</aside>
</div>
<div class='footer'>footer</div>
</div>
I was hoping to find a way/solution/method-of-approach and learn how to how to effectively control the layout of a website when I build them from scratch. This image here (bottom), is exactly what I am trying to replicate. I eventually did, but it was not responsive. Initially I had trouble with controlling div s positions, but flexbox helped me with that. The objective now is to learn how to get the vertical properties of the elements to behave as well as the horizontal ones.
use property flex wrap :wrap; it helps in small screen.
https://scrimba.com/g/gflexbox
I've got some problems with specific element positioning. Could you give me any advice how to make it works?
It seems that buttons should be a part of content div but I don't really know how to do this. I tried many ideas but without any result.
Thanks in advance :)
My current code:
.header {
width: 100%;
background-color: red;
height: 65px;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
}
.item {
width: 700px;
height: 100px;
background-color: grey;
}
<div class="header"></div>
<div class="container">
<div class="item" style="background-color: red; height: 65px;">
<button>test</button>
</div>
<div class="item"></div>
</div>
I have no clue how to set div with buttons to be above header div. I tried with position relative but without success.
I know that it can be achieved by setting maring-top in container div. But is there any more elegant solution?
Well if you wanted to make a template as you mentioned above in the attached picture, I would say you won't need to define a new div above your container as the independent div and you should wrap all your header items into one division and make them flex with related justify-content and align-items, the flexbox with reacting to this as two different items that two of them (first button and header item) are wrapped into one div and the other one is a simple button (you can wrap it into another div too if you wanted) then with the justify-content: space-between they will force to the two endpoints of the division with space between them. Then you should do the same with your first wrapped items in div but in this one, you should add specific width to the division to make the justify-content: space-between work properly.
I add the simple code snippet below for more illustration, you can use it freely.
.header {
background-color: red;
padding: 10px 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header button {
background-color: yellow;
font-weight: bold;
border: none;
}
.header span {
color: white;
}
.header-left {
width: 130px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container {
max-width: 100%;
}
.item {
width: 200px
min-height: 400px;
margin: 0 40px;
padding: 100px;
background-color: lightgrey;
}
.item > p {
text-align: center;
}
<div class="header">
<div class="header-left">
<button>btn</button>
<span>header</span>
</div>
<button>btn</button>
</div>
<div class="container">
<div class="item">
<p>content</p>
</div>
</div>
If I am not getting it wrong, then you want the code of the button to be inside of container and on web page it should be shown on header. If this is what you are looking for then you can try the below code:
.header {
width: 100%;
background-color: red;
height: 65px;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
position: relative
}
.container button {
position: absolute;
top: -30px; // you can change it accordingly
}
.item {
width: 700px;
height: 100px;
background-color: grey;
}
<div class="header"></div>
<div class="container">
<button>test</button>
<div class="item"></div>
</div>
I'm trying to make a simple explanation page with 3 steps along with example code blocks and a short description. If you go to the codepen here, you will see what I am talking about (I have also reproduced the code below).
There are 3 steps, and the HTML/CSS structure of each step is identical. However, some of its contents may vary. If you look at the code pen, you'll see that the first and third steps look relatively okay. But the code block extends to different widths for some reason.
This is problem number one. How do I get it such that the code blocks (i.e. <div class="code">) are equal length for all three of the steps?
The second issue is that the code block for step 2 overflows outside of several of its parent div even though I have set overflow-x: scroll and width: 100%. Ideally, I would want the code block to be the same width as the other two, while allowing the code inside to be scrollable left and right.
This is problem number two. How do you constrain a div inside a flexbox such that it does not overflow outside of its parents and at the same time can allow scrolling within its immediate parent div?
I hope my explanation is sufficient. It's very hard for me to describe this as I am not too familiar with the quirks of Flexbox just yet. Please have a look at the codepen, I am certain it will become a lot clearer.
Thanks in advance and please let me know what else I may need to clarify.
HTML:
<div class="container">
<div class="step">
<div class="number">1</div>
<div class="step-body">
<div class="description">This is a description of the terminal code block below:</div>
<div class="code"><pre>npm install foo bar</pre></div>
</div>
</div>
<div class="step">
<div class="number">2</div>
<div class="step-body">
<div class="description">This is a description of the very very very long single-line code block below:</div>
<div class="code"><pre>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar</pre></div>
</div>
</div>
<div class="step">
<div class="number">3</div>
<div class="step-body">
<div class="description">This is a description of the JSON code block below:</div>
<div class="code"><pre>{
"custom": {
"key": "a1b2c3d4e5f6"
}
}</pre></div>
</div>
</div>
</div>
CSS:
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: absolute;
}
.container {
max-width: 50%;
}
.step {
display: flex;
border: 1px solid red;
}
.number {
font-size: 2.5rem;
text-align: right;
flex-shrink: 0;
margin-right: 1rem;
width: 3rem;
}
.step-body {
padding-top: 1rem;
padding-bottom: 1rem;
}
.code {
background-color: black;
color: white;
width: 100%;
padding: 12px;
overflow-x: scroll;
}
Edit: here is a better solution then my first answer
Remove width: 100% from .code and add width: calc(100% - 4rem); to .step-body see fiddle https://jsfiddle.net/0kqx79g9/9/
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: absolute;
}
.container {
max-width: 50%;
}
.step {
display: flex;
border: 1px solid red;
}
.number {
font-size: 2.5rem;
text-align: right;
flex-shrink: 0;
margin-right: 1rem;
width: 3rem;
}
.step-body {
width: calc(100% - 4rem);
padding-top: 1rem;
padding-bottom: 1rem;
}
.code {
background-color: black;
color: white;
padding: 12px;
overflow-x: scroll;
}
I've adjusted the code you've provided to hopefully solve the issues you're having.
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: absolute;
}
.container {
max-width: 50%;
-webkit-flex-direction: column;
flex-direction: column;
}
.step {
border: 1px solid red;
-webkit-flex-direction: column;
flex-direction: column;
padding:5%;
}
.number {
font-size: 2.5rem;
text-align: right;
flex-shrink: 0;
margin-right: 1rem;
width: 3rem;
}
.step-body {
width:inherit;
padding-top: 1rem;
padding-bottom: 1rem;
}
.code {
background-color: black;
color: white;
width: 100%;
/* padding: 12px; */
overflow-x: scroll;
}
here is the example:
https://jsfiddle.net/ax0mfc0p/
you can find some more information on flex-box from here:
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties