Css Layout Not Working On Mobile Device

February 28, 2024 Post a Comment

My template looks pretty much the way I want it on my desktop but when I load it on my phone in either view the navigation on the left side does not resize to fit like the rest of

Solution 1:

You can use media query for you requirement. You can also change some layout to fill in the mobile device.

Try the below code.

<!DOCTYPE html><html><head><metaname="viewport"content="width=device-width, initial-scale=1"><style>body {
    background-color: #666;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
}

#container {
    width: 80%;
    margin: 0 auto;
    background-color:#12295d;
    border:5px solid #a6c250;
}

#headerimg {
    width:100%;
    margin:auto;
    height: auto;
}

#content {
    float:right;
    width:81%;
    background-color:#FFFFFF;
    border-left:5px solid #a6c250;
    min-height:350px;
}

#sidebar {
    float:left;
    width:18%;
}

#primary {
    float: left;
    width: 98%;
    background-color:#245192;
    border-top: 0;
}

/* nav */nav {
    background-color:#245192;
    width:100%;
    float:left;
    height:inherit;
}

/* navigation button styles */a.btn {
    display: block;
    width: 100%;
    padding: 10px0px10px10px;
    font-family: Arial;
    font-size: 16px;
    text-decoration: none;
    color: #ffffff;
    text-shadow: -1px -1px2px#618926;
    background: -moz-linear-gradient(#98ba40, #a6c25035%, #618926);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926));
    border: 1px solid #618926;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

a.btn:hover {
    text-shadow: -1px -1px2px#465f97;
    background: -moz-linear-gradient(#245192, #1e3b7375%, #12295d);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
    border: 1px solid #0f2557;
}

.currentpage {
    display: block;
    width: 100%;
    padding: 10px0px10px10px;
    font-family: Arial;
    font-size: 1.5em;
    text-decoration: none;
    color: #ffffff;
    text-shadow: -1px -1px2px#465f97;
    background: -moz-linear-gradient(#245192, #1e3b7375%, #12295d);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
    border: 1px solid #0f2557;
}
#footer {
    clear:both;
    clear: both;
    text-align:center;
    width:100$;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #DCF414;
    border-top: 5px solid #a6c250;
    background-color: #12295d;
}
	
	@media screen and (max-width:680px) {
		#sidebar {
    float:none;
    width:100%;display: block;
	}
		#content {
    float:none;
    width:100%;
	}

	}
</style></head><body><divid="container"><divid="header"><imgsrc="http://www.mytournamentonline.com/work/images/New_header_700_150.jpg"alt="My Tournamentonline Header" /></div><divid="content"><divstyle="padding:10px;"><p>Main content</p></div></div><divid="sidebar"><divid="primary"><nav>
                <?php
                    function curPageName() {
                        return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
                    }
                ?>
                <ahref="index.php"class=<?phpif (curPageName() == 'index.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Home</a><ahref="tournaments.php"class=<?phpif (curPageName() == 'tournaments.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Active Tournaments</a><ahref="club_reg.php"class=<?phpif (curPageName() == 'club_reg.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Club Registration</a><ahref="login.php"class=<?phpif (curPageName() == 'login.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Member Login</a><ahref="contactUs.php"class=<?phpif (curPageName() == 'contactUs.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Contact Us</a></nav></div></div><divid="footer"><p>Footer</p></div></div></body></html>

Solution 2:

Use the media query to control the mobile view. start with the #container set width:100% . and in your Html I would suggest moving the sidebar div above the content div then swapping the floats.

Also, i would suggest setting width:100% on all #container > div.

Look into bootstrap link here

Solution 3:

You can use media query as like below

@media only screen and (max-width: 768px) {
/* For mobile phones: */
body {
width: 100%;
}
/* customize the tag, class, id's according to your requirement */
.class{
}
<tag>{
}
#id's{
}

if the width is below 768px then you can make use of above media queries.

Html5 Learning

Css Layout Not Working On Mobile Device

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Css Layout Not Working On Mobile Device"