I've been trying to get the elements of my website to look equally okay on both PC monitors and smart phone displays.
I've tried adding the the meta viewport line within the head section but this doesn't seem to have changed anything:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
On my desktop display the site looks like this.
When I scroll down there is no additional space (which is what I want).
When I view the website on my smart phone, it looks like this:
As you can see the elemts are squeezed into the very top corner and there is a lot of free space below them. I realize there is a difference between portrait and landscape views, but the amount of space seems pretty exaggerated to me.
When I turn the smart phone horizontal it does look okay. However, I would like users to view the site vertically on their smart phones, and for the elements to take up more of the screen.
Here is my html:
<html>
<head>
<link rel="stylesheet" href="css/bootstrap-4.0.0-dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/pagestyle.css">
<style type="text/css">
.tuner {position: relative; left:50%; transform:translateX(-50%); margin-top:5%; }
.alttunings {position: absolute; left: 5%; top: 50px; width: 180px;}
.btn-default:hover{background-color:#CCCCCC;border-color:#CCCCCC}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
</head>
<body>
<div class="tuner">
<object type="image/svg+xml" data="media/standard-tuning.svg">
</object>
<div class="alttunings">
<p> <button type="button" class="btn btn-block selectedtuning" width=230px>Standard Tuning</button>
</p>
<p> <button type="button" class="btn btn-block unselectedtuning" width=230px>Open D Tuning</button>
</p>
<p> <button type="button" class="btn btn-block unselectedtuning" width=230px>Drop D Tuning</button>
</p>
<p> <button type="button" class="btn btn-block unselectedtuning" width=230px>Open G Tuning</button>
</p>
</div>
</div>
<script type="text/javascript" src="js/script1.js" defer></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Here is my main page css:
body {
background-color: #C1C1C1;
width: auto;
}
Is there anything else I can try other than using the viewport line that I've already tried?
Related
I have an image within a container that needs to be down scaled. When rendered out the full source code is as below.
/*STAFF LOGIN*/
#myMainContainer {
border: 10px solid red;
}
#logoStaffLoginPage {
width: 50%;
height: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href=/static/main.css>
<link rel="stylesheet" href=/static/style.css>
<link rel="shortcut icon" type="image/png" href="/static/media/favicon.png" />
<title></title>
<!--font-awesome including icon for shopping cart-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Font awesome-->
<script src="https://kit.fontawesome.com/efc09bd617.js" crossorigin="anonymous"></script>
<!--Google recaptcha-->
<script src="https://www.google.com/recaptcha/enterprise.js?render=6LdNCXEhAAAAAHy7vvB9oqTF8zSfVrGDIfr-82Re"></script>
<!--Google analytics-->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-20BMMNWM05"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-20BMMNWM05');
</script>
</head>
<body>
<div class="container" id="myMainContainer">
<div class="row">
<div class="col">
<img src="/media/logoWithText.png" alt="Logo" id="logoStaffLoginPage">
</div>
</div>
<div class="row">
<div class="col bodyTextBold centerText">
Staff Login
</div>
</div>
</div>
<div class="container">
<form method="post" action="/accounts/login/">
<input type="hidden" name="csrfmiddlewaretoken" value="V3d7Hqf3vYG8whYv6xF7yU0Cak3dKk21xn7U6X6dxCXEPdHAWd9URA8Sc69YRlOy">
<label for="id_username">Username:</label>
<br>
<input class="form-control" type="text" name="username" autofocus autocapitalize="none" autocomplete="username" maxlength="150" required id="id_username">
<br><br>
<label for="id_password">Password:</label>
<br>
<input class="form-control" type="password" name="password" autocomplete="current-password" required id="id_password">
<br>
<br>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
I have tried with max-width and max-height in css and none of them seem to work. Also I have tried to put the img out of the container, and even outside it does not scale properly. Also I have tried clear the cookies, and still I am unable to scale down the image.
Below is a screen dump of the page, and I want to down scale the logo image.
There seem to be jquery file missing. jquery can help to support with the responsive website design need which allow you to set the size condition of your file based on the window size limitation.
Well, you can try changing the size of parent container. and use object fit property for logo. The logo image inside will scale itself according to it.
Reference: https://www.delftstack.com/howto/css/resize-image-css/#:~:text=Use%20the%20object%2Dfit%20Property%20to%20Resize%20the%20Image%20in%20CSS,-We%20can%20use&text=We%20can%20specify%20the%20way,given%20dimension%20of%20the%20container.
parent-div{
height:200px;
width:300px;
}
image{
height:100%;
width:100%;
object-fit:contain;
}
I figured it out. I was edit the wrong css file.
i have a bootstrap layout on a simple page, just rows with some columns ordered on fullscreen, no with or hight is set and that should remain that way.
here is my layout definition
<div class="container-fluid">
<div class="row">
<div class="section col-lg">
<ul class="list-group>
inside the ul i have a button like this
<a type="button" class="btn btn-success list-group-item list-group-item-warning"
href="https://www.google.at" target="_blank">
<i class="material-icons">extension</i>
<br>
asdfasdfasdfasd fasdfasdfasdfasdfasdf
</a>
but now the problem is that the button text overflows and does not wrap inside the button.
i already tried the solution from Force a line break inside the button's text when using small screens but this also did nothing but cut the button text and not wraping it into the next line
i also tried with overflow : hidden; but this also just hides the text before it overflows
By adding this #media query CSS for smaller screens you can make the button text split on gaps in the button sentence as many times as required to fit inside the button:
CSS
#media only screen and (max-width: 30em) {
body .btn { white-space: normal; }
}
As you can see in this image, this will cover all viewing devices down to a width of 232px, which is well below the standard width for coding the smallest media queries:
Even if you wanted to code below this standard width the CSS snippet still works. Here is the result at an almost ridiculous width of 186px, achieved simply by splitting the text in your question once more. You can make the text even smaller by adding Bootstrap's recommended usage of <small></small> on BS4 .btn text >>> https://getbootstrap.com/docs/4.0/content/typography/#inline-text-elements
I've also added the CSS in a Stack Overflow code snippet below as evidence of it's functional viability, though I should note (as you already know) that it's not my own code. I got it from another Stack Overflow question here >>> Force a line break inside the button's text when using small screens
I hope that it helps to resolve your issues.
#media only screen and (max-width: 30em) {
body .btn { white-space: normal; }
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="section col-lg">
<a type="button" class="btn btn-success list-group-item list-group-item-warning"
href="https://www.google.at" target="_blank">
<i class="material-icons">extension</i>
<br>
asdfasdfasdfasd fasdfasdfasdfasdfasdf
</a>
</div>
</div>
</div>
<!-- javascript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Try to use the p tag:
<a type="button" class="btn btn-success list-group-item list-group-item-warning"
href="https://www.google.at" target="_blank">
<i class="material-icons">extension</i>
<br>
<p>asdfasdfasdfasd fasdfasdfasdfasdfasdf</p>
</a>
Try to use class = "d-inline-block text-truncate" in a tag
.menu {
max-width: 350px;
margin: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Booting the mind with Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container-fluid">
<div class="btn-group-vertical menu">
<button type="button" class="btn btn-default btn-block menuitem" data-toggle="collapse" data-target="#demo">Apple</button>
<div id="demo" class="collapse">
Hello world! I am Raj. I am trying to make something. But I don't know if I could do that.
</div>
<button type="button" class="btn btn-default menuitem">Samsung</button>
<button type="button" class="btn btn-default menuitem">Sony</button>
</div>
</div>
</body>
</html>
I am trying to create a collapsible button menu having a fixed initial width using Bootstrap. I want this menu to be responsive. By setting the width of the button group, I am being able to get a menu with a perfect width. However, I am loosing its responsive property. By replacing the width property in the CSS file with the max-width property, I am getting a responsive menu. But then the width of the menu is changing when a menu item is expanded and collapsed. I also tried to set the width, max-width and min-width of .btn class. But all these trials went in vain. Is there any way through which I can achieve both responsiveness and a fixed width?
Try this
.menu {
width: 350px;
margin: 50px;
}
#media only screen and (max-width: 769px) {
.menu{
width:25%;
}
}
sample fiddle..
I'm doing a website that will be mostly displayed on a mobile.
I'm using bootstrap 4.
Currently I'm trying to display an element that has to be "vertically" centered in the available space.
By this I mean: I've a title, which use a fixed size, and I've one message + 2 button in a div that I need to display in the vertical middle of the available space(without overflow).
I found this: vertical-align with Bootstrap 3 --> the bootstrap 4 snippet doesn't work
One other answer which was about flexible box was promising, but it seems that if I have only one component that should use all the remaining space it doesn't work.
Also, one thing; the element that I need to have vertically aligned is displayed through a jquery call:
$('#btToShow').click(function(){
$('#card-container').fadeOut(200, function(){$('#wait-for-result-container').fadeIn();});
});
$('#change-choice').click(function(){
$('#wait-for-result-container').fadeOut(200, function(){$('#card-container').fadeIn();});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Some page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous">
</head>
<body>
<H1 class="text-center page-header">Somelist</H1>
<div id="card-container" class="container show center-block">
<div id="card-subcontainer" class="row center-block">
<!-- Here there is normally a lot of buttons -->
<button class="btn" id="btToShow">Show</button>
</div>
</div>
<div id="wait-for-result-container" class="container center-block text-center m-7" style="display: none;">
<h2>This is the part that is absolutely not vertically aligned</h2>
<div>
<button class="btn btn-primary btn-lg">Wait for it...</button>
<button id="change-choice" class="btn btn-danger">Change the choice</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.2.0/js/mdb.min.js" crossorigin="anonymous"></script>-->
</body>
</html>
Any idea how I can align the content of #wait-for-result-container vertically in the middle?
You can vertically center content with flexbox
#wait-for-result-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
codePen
To fadeIn with display: flex
$("#wait-for-result-container")
.css("display", "flex")
.hide()
.fadeIn();
This method works really well for Bootstrap 3.x:
#wait-for-result-container {
position:absolute;
left:0;
right:0;
top:50%;
-webkit-transform:translateY(-50%) !important;
-ms-transform:translateY(-50%) !important;
transform:translateY(-50%) !important;
}
top:50% sets the position of the div 1/2 way down the container, then transform:translateY(-50%) shifts it back up half the distance, making a nicely vertically centered object relative to the parent container.
You could just position it absolutely:
#wait-for-result-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
$('#btToShow').click(function(){
$('#card-container').fadeOut(200, function(){$('#wait-for-result-container').fadeIn();});
});
$('#change-choice').click(function(){
$('#wait-for-result-container').fadeOut(200, function(){$('#card-container').fadeIn();});
});
#wait-for-result-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Some page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous">
</head>
<body>
<H1 class="text-center page-header">Somelist</H1>
<div id="card-container" class="container show center-block">
<div id="card-subcontainer" class="row center-block">
<!-- Here there is normally a lot of buttons -->
<button class="btn" id="btToShow">Show</button>
</div>
</div>
<div id="wait-for-result-container" class="container center-block text-center m-7" style="display: none;">
<h2>This is the part that is absolutely not vertically aligned</h2>
<div>
<button class="btn btn-primary btn-lg">Wait for it...</button>
<button id="change-choice" class="btn btn-danger">Change the choice</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.2.0/js/mdb.min.js" crossorigin="anonymous"></script>-->
</body>
</html>
So I'm trying to make my website mobile-responsive as I have it how I want it to look on a desktop. However, my media queries won't work for classes in any other view than the index.html and I can't figure out why.
Index.html:
html ng-app='skypeClone'
`
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"/> Have tried media queries with and without this-->
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Skype Clone</title>
</head>
<body ng-controller='mainCtrl'>
<ui-view class="view"></ui-view>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="//cdn.temasys.com.sg/skylink/skylinkjs/0.6.x/skylink.complete.min.js"></script>
<script src="js/app.js"></script>
<script src="js/mainCtrl.js"></script>
<script src="js/helpCtrl.js"></script>
<script src="js/loginCtrl.js"></script>
<script src="js/loginSvc.js"></script>
<script src="js/createUserCtrl.js"></script>
<script src="js/createUserSvc.js"></script>
<script src="js/service.js"></script>
<script src="js/userHomeCtrl.js"></script>
</body
</html>
`
If the commented out code isn't showing up, I have tried media queries with and without the meta name="viewport" content="width=device-width, initial-scale=1.0"
Other Route:
`
<div id="background-setter-homepage">
<div id="header-wrap">
<div id="header">
<button class="button" id="help" ui-sref='help'>Help</button>
<button class="button" id="about" ui-sref='about'>About</button>
<button class="button" id="login" ui-sref='login'>Login</button>
</div>
</div>
<br><br>
<div class="middleOfPage" id="container">
<div id="text-and-button">
<h2 id="phrase">Skyclone keeps the world talking, for free</h2> <br>
<button class="button" id="getStarted" ui-sref='createUser'>Create An Account</button>
<div>
</div>
</div>
`
All I want to test just to get it to work is to have the class 'phrase' of the h2 element turn red when the screen gets to a certain max-width.
CSS:
`
#media (max-width: 375px) {
#phrase{
color: lightgreen;
}
}
`
I've Also tried
`
#media only screen and (max-width: 800px) {
#phrase{
color: lightgreen;
}
}
`
The above code doesn't work, however it will work if I select the class on ui-view in the index.html and set the visibility to none at the same width. So It's kind of working...but not really.
Have any of you run into this problem before? I'm currently at a loss. Any and all help is SUPER APPRECIATED!! Thanks in advance (:
If setting visibility to none in the same media query does work, maybe all you need is to change color: lightgreen; to color: lightgreen !important;
Have you tried that yet?