Lynob Lynob - 3 months ago 10
CSS Question

Display block on mobile screens

Check this website on mobile you'll understand what I'm trying to do. This is my website

Notice how on the index on wix, the becomes

display: block
on mobile. I mean
your success and the two other boxes
.

I tried to do the same, it worked awfully on desktop when resizing the browser, but on mobile it didn't.

I have
index_whitebox
and
index_whitebox_2
and
index_whitebox_3


It goes like this:

CSS

.index_whitebox{
min-height: 380px;
width: 25%;
position: relative;
float: left;
margin-left: 6%;
border: 2px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
display: inline-block;
}


Same CSS with slight difference in the margin for the other two boxes.
As for media query:

CSS

@media screen and (max-width: 500px) {

.index_whitebox{
min-height: 0;
width: 90%;
position: relative;
float: none;
margin-left: auto
margin: auto;
border: 2px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
display: block;
}

}


HTML

<div class="whitebox_wrapper">
<div class="index_whitebox">
<div class="index_title">
title
</div>
<div class="index_image">
</div>
<div class="index_article">
<div class="index_first_cell_text_wrapper">
</div>
</div>
<div id="index_nav_container">
<a href="contact.html" class="navButton_2">Contact</a>
</div>
</div>
</div>


and same html for the other boxes.

Answer

Put this in your css file

@media screen and (max-width: 768px) {
    .header{min-width:100%;}
    #banner{min-width:100% !important;}
    .whitebox_wrapper{min-width:100%;}
    .index_wrapper{width:100%;}
}

it might help you

Comments