How can I make my website look better on large screens?
Clash Royale CLAN TAG#URR8PPPHow can I make my website look better on large screens?
I created a website through my own coding but I have issue that is my website is not looks good at big desktop but vice versa at medium desktop it is looks bit good. This is the 
when I open at bigbig screen and this is when I open at 
.
I have much tags in my css since I nit posted my stylesheet because it becomes more lengthy or might you all wanna confused. Please have a look at my website and it's stylesheet
And help me how I make my website constable , I means I want show same as the show as mobile desktop version at every screen.
I also irritateded for shows blank white spaces right side below the form.
Please help to fix this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>MSG NOW | Insta Message</title>
<meta charset="utf-8"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="./assets/copyright-shiv/css/custome-style_Allrights=reserved.css"/>
<link rel="stylesheet" type="text/css" href="./assets/copyright-shiv/css/custome-style_Allrights=reserved_load.css"/>
<link rel="stylesheet" type="text/css" href="./assets/copyright-shiv/css/offln.css"/>
<link rel="stylesheet" type="text/css" href="./assets/copyright-shiv/css/jsOffln_lang-v79-574.css"/>
<link rel="stylesheet" type="text/css" href="./assets/copyright-shiv/css/database.css"/>
<link rel="stylesheet" type="text/css" href="./assets/copyright-shiv/css/cust_styl_allrights-reserverCopyRight_cont-pop.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto"/>
<link rel="stylesheet" href="./assets/copyright-shiv/css/loading-e8a6f52b.css"/>
<script src="https://www.googletagmanager.com/gtag/js?id=UA-121293417-1" async></script>
<link rel="manifest" href="./assets/copyright-shiv/js/manifest.json"/>
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
var OneSignal = window.OneSignal || ;
OneSignal.push(function() {
OneSignal.init({
appId: "62b683e5-a7c4-47c8-94a6-10a638077dcf",
});
});
window.dataLayer = window.dataLayer || ;
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-121293417-1');
</script>
<noscript><style>html{display:none;}</style>
<meta http-equiv="refresh" content="0.0;url=./nojs/index.php">
</noscript>
</head>
<body oncontextmenu="return false" oncopy="return false" oncut="return false" onpaste="return false">
<div class="bd_wrap">
<div class="bd_wrapper">
</div>
<div class="form_wrapper">
<div class="form_container">
<div class="row clearfix">
<div class="col_half dst">
<img src="./assets/copyright-shiv/images/Lg-MSGNoW-33972.jpg" class="img-responsive"/>
</div>
<div class="col_half last">
<div class="title_container">
<h2 class="h2">Sign in to Account</h2>
</div>
<form method="post" id="login" name="login" action="" autocomplete="off" onsubmit="return validateForm()">
<input type="hidden" name="securityCsRf_userLogin" value="">
<div class="input_field">
<span><i class="fa fa-user" aria-hidden="true"></i></span>
<input type="text" name="username" placeholder="Username" onselectstart="return false" maxlength="25" minlength="10" required />
</div>
<div class="input_field"><span><i class="fa fa-lock" aria-hidden="true"></i></span>
<input type="password" name="password" placeholder="Password" minlength="" maxlength="30" minlength="8" id="password-field" required />
</div>
<input class="button" name="submit" type="submit" id="btnSubmit" value="SIGN IN"/>
<div class="row clearfix bottom_row">
<div class="col_half remember_me"><a href="./register/regNew_type=user-stg=1.php" id="link" alt="Click to create an account" title="New user registration">New user can register here</a>
</div>
<div class="col_half forgot_pw"><a href="./forgot password/forgot_password=accountype=user.php" id="link" alt="Forgotten your password?" title="Change your password">Forgot Password?</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--div class="ftr_wrapper" id="message">
<div class="ftralert ftralert-warning">
<div><i class="glyphicon glyphicon-lock" style="font-size:24px;"></i></div>
<div>This login form is provided in a secure environment and to help protect against fraud or attackers. your current internet protocol address is being monitered.</div>
</div>
</div-->
</div>
<!--p class="credit">Developed by <a href="#" target="_blank">Shiv Kumar</a></p-->
<div id="overlay"></div>
<div id="loading">
<h4 id="h4">Please Wait!</h4>
<p id="ntf">It will take a second!</p>
</div>
<script src="./assets/copyright-shiv/js/v0-7-13-offln-min.js"></script>
<script src="./assets/copyright-shiv/js/query_actjs-eFiiC__SQ==js.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./assets/copyright-shiv/js/jquery-1.7.2.min.js"></script>
<script src="./assets/copyright-shiv/js/copyright.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
Why not just make it take up less than 100% of the page?
– Marie
yesterday
3 Answers
3
Your solution is to put all content in container.
You can create a custom class container or name it how you want.
container
container
And add styles for this class:
.container {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
But i agree with Joe you should learn more about media queries.
If you're having issues with the website looking different on larger or smaller screens (at least I think this is your issue based on the question) you're going to want to look into media queries. I see you have a few in your style sheet, but they do next to nothing since you're not utilizing them. Please take a look at this link to learn more about media queries. If you have more questions, feel free to ask.
I using the media query even it is working too but at large big screen I getting issue.
– Your Frd
yesterday
I understand that you're "Using" media queries, but I see that you have a few queries with as little as one element in them. Your media query can, and should if you're running into issues, contain all elements that aren't looking correct on a larger screen as a baseline.
– Joe
yesterday
Sir, What would correct media if I am using wrong or something I am missing pls provide me code
– Your Frd
yesterday
Hmmm, I'll look at your CSS, but it's no longer linked in your question.
– Joe
yesterday
As Joe stated, You should check out media queries. Media queries are great if the design changes at certain break points.
You would also have plenty to gain by using percentage based / viewport size based units instead of pixels.
#someid{
height: 10px; //Just 10 pixels tall.
height: 10%; //10% of the height of the immediate parent.
height: 10vh;//10% the height of the Viewport Height. (1vh = 1% viewport height)
width: 10vw;//10% the height of the Viewport Height. (1vw = 1% viewport width)
}
You could apply the vh, vw, or % based units instead of the static 'px' unit to make an elements 'width' or 'height' scale with the window viewport or their encapsulating parent.
vh
vw
%
could you tell me exact issue, also What I apply inn media query, what will Minn width size in media.?
– Your Frd
yesterday
See the examples here. Your
min-width would be the minimum width of the screen for that media query to be active. In contrast, your max-width would be the maximum width of the screen for that media query to be active. I'm not wanting to look over your entire code and tweak it for you, so that is up to you. I would start by checking how your image scales.– Zackary Jones
yesterday
min-width
max-width
Sir thank u for your answer. I see your example but I design and host my website via mobile phone because I have not desktop. That why I can't view result even after add query. You all using desktop please let's us know , also I am in scared what I edit is
min width. Please help to provide me a script sir.– Your Frd
yesterday
min width
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Please review How to Ask, and how to create an Minimal, Complete, and Verifiable example. Your question is poorly formed as it is.
– cale_b
yesterday