Click here to Skip to main content
15,354,402 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Hi everyone. My problem (in HTML/CSS) is that, when I go to mobile view, it's extending a site width, for pre-counted size. Before all, the bar is calculating a width. for buttons for I add. But, also was I say, then when go to mobile it's extending site for that size.

Really, what I just need, it's when go to mobile, to not oversize a width
of site with is below picture marked with red. And just I need, to remove that red marked field when go to mobile.

A error (what I missing) is reproduced by changing the width of navigation bar to 100vw. Please help.

Image (on imgur):
https://imgur.com/a/ufXA4YR

Code (HTML):
<!--Created by UKI COMPUTERS, more information on ukicomputers.github.io-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
        <title>Časopis "Odskočna daska"</title>
        <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="./kod/pocetna.css">
    </head>

    <body class="kontrole">
        <ul>
            <li>
                <a href="#">
                    <div class="icon">
                        class="fa fa-home" data-text="Početna stranica" href="#">
                    </a>
                    <a href="javascript:;">
                        <span>Instagram</span>
                        ^__i class="fa fa-instagram">
                    </a>
                    <a href="javascript:;">
                        <span>Whatsapp</span>
                        ^__i class="fa fa-whatsapp">
                    </a>
                    <a href="javascript:;">
                        <span>Google+</span>
                        ^__i class="fa fa-google-plus">
                    </a>
            </div>
            <div class="overlay"></div>
        </div>     
    </body>
    <body>
        <h1 style="font-family:'Segoe UI';font-style:normal;color:darkgreen;font-size:40px;" id="pod-naslov2">N<font color="white">a</font><font color="darkblue">jno</font><font color="darkorange">vije</font> <font color="whitesmoke">vesti</font></h1>
        <br/><br/>
    </body>
    <body>
        <a href src="google.com"><p style="font-family:'Segoe UI';font-style:normal;color:white;font-size:40px;" id="vesti1">Neki tekst!<br/><font size="-1" id="pod-naslov">Đaci VII/1 su napravili pano o Prvom svetskom ratu. <br/>Više informacije...</font></p></a>
            <a href src="google.com"><p style="font-family:'Segoe UI';font-style:normal;color:white;font-size:40px;" id="vesti2">Neki tekst!<br/><font size="-1" id="pod-naslov">Đaci VII/1 su napravili pano o Prvom svetskom ratu. <br/>Više informacije...</font></p></a>
            <a href src="google.com"><p style="font-family:'Segoe UI';font-style:normal;color:white;font-size:40px;" id="vesti3">Neki tekst!<br/><font size="-1" id="pod-naslov">Đaci VII/1 su napravili pano o Prvom svetskom ratu. <br/>Više informacije...</font></p></a>
            <a href src="google.com"><p style="font-family:'Segoe UI';font-style:normal;color:white;font-size:40px;" id="vesti4">Neki tekst!<br/><font size="-1" id="pod-naslov">Đaci VII/1 su napravili pano o Prvom svetskom ratu. <br/>Više informacije...</font></p></a>
    </body>
</html>


Code (CSS):
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
    background-image: url("../datoteke/logo.png");
}

.kontrole ul{
	position:absolute;
	top: 11%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin: 0;
	padding: 20px 0;
    z-index: 1;
	background: #fff;
	display: flex;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.kontrole ul li{
	list-style: none;
	text-align: center;
	display: block;
	border-right: 1px solid rgba(0,0,0,0.2);
}
.kontrole ul li:last-child{
	border-right: none;
}
.kontrole ul li a{
	text-decoration: none;
	padding: 0 50px;
	display: block;
}
.kontrole ul li a .icon{
	width: 40px;
	height: 40px;
	text-align: center;
	
	overflow: hidden;
	margin: 0 auto 10px;
	
}
.kontrole ul li a .icon .fa{
	width: 100%;
	height: 100%;
	 line-height: 40px;
	font-size: 34px;
	transition: 0.5s;
	color: #000;
}

.kontrole ul li a .icon .fa:last-child{
	color: purple;
}
.kontrole ul li a:hover .icon .fa{
	transform: translateY(-100%);
}
.kontrole ul li a .name{
	position: relative;
	height: 20px; 
	width: 100%;
	display: block;
	overflow: hidden;
}
.kontrole ul li a .name span{
	display: block;
	position: relative;
	color: #000;
	font-size: 12px;
	line-height: 20px;
	transition: 0.5s;
	
}
.kontrole ul li a .name span:before{
	content: attr(data-text);
	position: absolute;
	top: -100%;
	width: 100%;
	left: 0;
	height: 1005;
	color: lightsalmon;
	
}
.kontrole ul li a:hover .name span{
	transform: translateY(20px);
}

.podeli{
    width: 1%;
    min-height: 1vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}

.podeli .overlay{
    z-index: 3;
    top: 0;
    left: 0;
    bottom: 0;
    right:0;
    background: rgba(0,0,0,0.4);
}

.podeli .buttons{
    position: absolute;
    z-index: 5;
    left: 0;
    top: calc(50vh - 135px);
    display: flex;
    flex-direction: column;
}

.podeli .buttons a{
    text-decoration: none;
    color: #fff;
    position: absolute;
    left: 0;
    padding: 8px;
    height: 45px;
    width: 32px;
    border-radius: 5px 0 0 5px;
    text-align: center;
    font-size: 19px;
    transition: 0.3s;
}

.podeli .buttons span{
    display: none;
    transition: 0.3s;
}

.podeli .buttons a:first-child{
    top: 0;
    background: rgba(47,47,238,0.863);
}
.podeli .buttons a:nth-child(2){
    top: 70px;
    background: rgba(52,146,255,0.863);
}
.podeli .buttons a:nth-child(3){
    top: 140px;
    background: rgba(255,253,140,0.863);
    color: #000;
}
.podeli .buttons a:nth-child(4){
    top: 210px;
    background: rgba(112,255,55,0.863);
    color: #000;
}
.podeli .buttons a:last-child{
    top: 280px;
    background: rgba(253,62,62,0.863);
}
.podeli .buttons a:hover{
    width: 200px;
    border-radius: 5px;
}
.podeli .buttons a:hover span{
    display:inline;
    margin-right: 10px;
}

a:hover, a:visited, a:link, a:active{
    text-decoration: none;
}

/* TEST KOD - OJ JOJ MILE OKANISE ŠLJIVE */

#vesti1 {
  border-radius: 25px;
  background: url(../images/image-1.png);
  background-position: left top;
  padding: 20px; 
  /* širina Visina */
  width:1000px;
  height: 333px; 
  text-shadow: 2px 2px 5px red;
  margin-left: auto;
  margin-right: auto;
  float: left;
}
#vesti2 {
  border-radius: 25px;
  background: url(../images/stay-5.png);
  background-position: left top;
  padding: 20px; 
  /* širina Visina */
  width: 333px;
  height: 333px; 
  text-shadow: 2px 2px 5px red;
  margin-left: auto;
  margin-right: auto;
  float: right;
}

#vesti3 {
  border-radius: 25px;
  background: url(../images/stay-5.png);
  background-position: left top;
  padding: 20px; 
  /* širina Visina */
  width: 333px;
  height: 333px; 
  text-shadow: 2px 2px 5px red;
  margin-left: auto;
  margin-right: auto;
  float: left;
}
#vesti4 {
border-radius: 25px;
  background: url(../images/image-2.png);
  background-position: left top;
  padding: 20px; 
  /* širina Visina */
  width:1000px;
  height: 333px; 
  text-shadow: 2px 2px 5px red;
  margin-left: auto;
  margin-right: auto;
  float: right;
}

#pod-naslov{
  text-shadow: 2px 2px 5px blue; 
  position: absolute;
}

#pod-naslov2{
  text-shadow: 2px 2px 19px darkred; 
}

@media screen and (min-width : 0px) and (max-width : 767px){
#vesti1{
    width: 100vw;
    height: 333px;
}
#vesti2{
    width: 100vw;
    height: 333px;
}
#vesti3{
    width: 100vw;
    height: 333px;
}
#vesti4{
    width: 100vw;
    height: 333px;
}
.kontrole ul{
    width: 100vw;
    margin:0 auto;
}
}


What I have tried:

Changing some values, but nothing happened.
Posted
Comments
ukicomputers.github.io 11-May-22 10:46am
   
Any help?
Richard MacCutchan 11-May-22 11:03am
   
Please be patient. Everyone here answers questions in their own time, and many also have full time jobs.
ukicomputers.github.io 12-May-22 5:24am
   
Ok. Thanks advance, for everyone give me an answer.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900