Problems with HTML and CSS structure

Question

Problems with HTML and CSS structure

Asked 8 years ago

Viewed 172 times

1

I’m with a case where I can’t solve, I’m developing a layout in HTML and CSS where I use flexbox centering content, well, on large screens everything works ok, but on small screen to div burst and does not show the content that should show.

* {
    margin: 0;
    padding: 0;
    
	font-family: Georgia, serif;
	font-weight: normal;
	font-size: 15px;
	color: #333;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    width: 100%;
}
body {
	background: #e9e9e9;
	overflow: hidden;
}
div.content {
    height: calc(100vh - 70px);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}
div.footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 35px;
    background-color: #FF4500;
}
/*div.container-menu {
    height: 100%;
    width: 750px;
    display: flex;
    justify-content: center;
    align-items: center;
}*/
div.menu {
    height: auto;
    width: 750px;    
    display: flex;
    align-items: center;
    justify-content:center;
    flex-wrap: wrap;
}
div.item-menu-busca {
    height: 80px;
    width: 80px;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.5);
    background: #FF4500;
    cursor: pointer;
}
div.item-menu {
    height: 80px;
    width: 80px;
    background: #fff;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.5s;
}
div.item-menu:hover {
    box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.5);
    background: #FF4500;    
    transition: all 0.5s;
}
svg.ico-busca {
    height: 32px;
    width: 32px;
    fill: #FFF;
}
svg.ico {
    height: 28px;
    width: 28px;
    fill: #FF4500;
    transition: all 0.5s;
}
div.item-menu:hover > svg.ico {
    height: 32px;
    width: 32px;
    fill: #FFF;
    transition: all 0.5s;
}

.md-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50%;
	max-width: 630px;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.md-show {
	visibility: visible;
}
.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(143,27,15,0.8);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}
/* Content styles */
.md-content {
	color: #fff;
	background: #e74c3c;
	position: relative;
	border-radius: 3px;
	margin: 0 auto;
}

.md-content h3 {
	margin: 0;
	padding: 0.4em;
	text-align: center;
	font-size: 2.4em;
	font-weight: 300;
	opacity: 0.8;
	background: rgba(0,0,0,0.1);
	border-radius: 3px 3px 0 0;
}

.md-content > div {
	padding: 15px 40px 30px;
	margin: 0;
	font-weight: 300;
	font-size: 1.15em;
}

.md-content > div p {
	margin: 0;
	padding: 10px 0;
}

.md-content > div ul {
	margin: 0;
	padding: 0 0 30px 20px;
}

.md-content > div ul li {
	padding: 5px 0;
}

.md-content button {
	display: block;
	margin: 0 auto;
	font-size: 0.8em;
}

/* Effect 12:  Just me */
.md-effect-12 .md-content {
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show.md-effect-12 ~ .md-overlay {
	background: #e74c3c;
} 

.md-effect-12 .md-content h3,
.md-effect-12 .md-content {
	background: transparent;
}

.md-show.md-effect-12 .md-content {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}
button {
	border: none;
	padding: 0.6em 1.2em;
	background: #c0392b;
	color: #fff;
	font-family: 'Lato', Calibri, Arial, sans-serif;
	font-size: 1em;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-block;
	margin: 3px 2px;
	border-radius: 2px;
}

button:hover {
	background: #A5281B;
}

<!DOCTYPE html>
<html lang="pt">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>VIPAGIS - Convergência</title>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script type="text/javascript" src="js/index.js"></script>
    </head>
    <body>
        <div class="md-modal md-effect-12" id="modal-12">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
        <div class="md-overlay"></div><!-- the overlay element -->
        <div class="content">
                <!-- <div class="container-menu"> -->
                    <div class="menu">
                        <div class="item-menu-busca" id="bt1">
                            <svg class="ico-busca">
                                <use xlink:href="css/suporte/icones.svg#ico-busca"></use>
                            </svg>
                        </div>
                        <div class="item-menu">
                            <svg class="ico">
                                <use xlink:href="css/suporte/icones.svg#ico-home"></use>
                            </svg>
                        </div>
                        <div class="item-menu">
                            <svg class="ico">
                                <use xlink:href="css/suporte/icones.svg#ico-email"></use>
                            </svg>
                        </div>
                        <div class="item-menu">
                            <svg class="ico">
                                <use xlink:href="css/suporte/icones.svg#ico-login"></use>
                            </svg>
                        </div>
                        <div class="item-menu">
                            <svg class="ico">
                                <use xlink:href="css/suporte/icones.svg#ico-compartilha"></use>
                            </svg>
                        </div>
                        <div class="item-menu">
                            <svg class="ico">
                                <use xlink:href="css/suporte/icones.svg#ico-download"></use>
                            </svg>
                        </div>
                        <div class="item-menu">
                            <svg class="ico">
                                <use xlink:href="css/suporte/icones.svg#ico-sair"></use>
                            </svg>
                        </div>
                        <div class="item-menu">
                            <svg class="ico">
                                <use xlink:href="css/suporte/icones.svg#ico-clip"></use>
                            </svg>
                        </div>
                        <div class="item-menu">
                            <svg class="ico" height="60px" width="60px">
                                <use xlink:href="css/suporte/icones.svg#ico-2"></use>
                            </svg>
                        </div>
                        <div class="item-menu"></div>
                        <div class="item-menu"></div>
                        <div class="item-menu"></div>
                        <div class="item-menu"></div>
                        <div class="item-menu"></div>
                        <div class="item-menu"></div>
                        <div class="item-menu"></div>
                    </div>
                <!--</div>-->
        </div>
        <div class="footer"></div>
    </body>
</html>

Run the code in the browser and render pr a smaller screen and the squares will not appear correctly, need help.

You know media queries?

– Taisbevalle

2016/11/04 at 17:06
I know but still do not know how it can solve my problem

– Diego Ferreira Simão

2016/11/04 at 17:15
With them you make your div responsive, check out this link http://www.w3schools.com/css/css_rwd_mediaqueries.asp

– Taisbevalle

2016/11/04 at 18:06
Diego to me is appearing normal, which exactly is not in agreement ? I am using Chrome and he is behaving well... What exactly is wrong...

– MagicHat

2016/11/04 at 18:10
Magichat, I’m having a hard time making my layout behave well when I resize in the browser to a smaller size, these 16 center div should all show up but when the browser this small 3 of them do not appear because of the centralized flexbox, this is my problem

– Diego Ferreira Simão

2016/11/04 at 19:22

1 answer

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Samuel Souza • **468** points · Answer 1 · 2016-11-08T12:01:11+00:00

Via css you can control the break-points, a tip is to use percentage instead of pixel in div, follow example:

@media screen and (max-width: 992px) {
  div.item-menu { 
      width: 33%;  
  }
}