CODEWITHSUNDEEP
htmlcssmobile
Nagashiwa
Nagashiwa

Reputation: 25

Responsive centered div different view in mobile view

I'm not sure how I can explain this the best. but I'm working on a layout right now, and I've created an okay code. However when I test the website the 3 DIV's I did create show up different in the mobile layout then in the PC layout.

Well here is the mobile code

.container1 {
margin:  5px auto;
width: 98%;
text-align:center;
}

.container1 > div {
width: 100%;
}
.col1 {
float: auto;

}
.col2 {
float: auto;

}
.col3 {
margin: auto;

}

div.panel {
width: 100%;

}

And this is the PC CODE

.container1 {
margin:  5px auto;
width: 98%;
text-align:center;
}

.container1 > div {
width: 33%;
}
.col1 {
float: left;

}
.col2 {
float: right;

}
.col3 {
margin: auto;

}

div.panel {
 width: 100%;

}

HTML IS:

<div class="container1">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>

However, the mobile version shows them as Col1 - Col3 - Col2

So I'm not sure how to fix this that mobile also shows it as col1,col2,col3. If I move the div, it doesn't show good in the PC version.

I hope someone can help out.

So, it are 3 div's horizontally aligned.

Upvotes: 1

Views: 68

Answers (4)

Nagashiwa
Nagashiwa

Reputation: 25

in the end this is my CSS and HTML which is working

.card {
box-shadow: 0px 4px 8px 0px rgba(0,255,24,0.3);
transition: 0.3s;
float: left;
border-radius: 5px;
background-color:#111;
width: 97%;
}

.container1 {
padding-top: 5px;
margin:  0px auto;
width: 98%;
text-align:center;
}

.container1 > div {
width: 33%;
}

.col1 {
float: left;
}

.col2 {
float: right;
}

.col3 {
margin: auto;
}

div.panel {
width: 100%;
}

Also HTML:

<div class="container1">
<div class="col1 ">
<div class="card " id="left">
</div></div>

<div class="col3 ">
<div class="card " id="center">
</div></div>

<div class="col2 ">
<div class="card " id="right">
</div></div>
</div>

Upvotes: 0

Aschab
Aschab

Reputation: 1399

Try this for the mobile: 

.container1 {
margin:  5px auto;
width: 98%;
text-align:center;
}

.container1 > div {
width: 100%;
}
.col1 {
float: left;

}
.col2 {
float: left;

}
.col3 {
margin: auto;

}

div.panel {
width: 100%;

}

float have no auto property

Upvotes: 0

Venu Madhav
Venu Madhav

Reputation: 433

Try this use display: flex; property to the parent element, and we have an property called order give to the child element with this we can achieve easily your requirement.

working codepen

Upvotes: 0

Johannes
Johannes

Reputation: 67748

There is no float: auto. Simply make them all float: left in the mobile version. Then they will appear in the order they are in the HTML code.

Upvotes: 1

Related Questions