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?
Related
I have a website running on desktop very well.
But when I resize it to mobile resolution it going crazy. And I want to make another new html file(it's whole different design) and make it for only specific resulotions.
But I have stuck with the question how do i do that?.
I make research and found some answers to help me but couldn't figure it out.
I tried hiding the body when they run website on mobile with
#media only screen
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{
#body-mobile{
display: inline-block;
}
#body-pc{
display: none;
}
}
but there is a mistake that i cant create 2 bodies on same html.
So is there any way to make another html or any another way to do it?
You can do it like this:
.desktop_container {
display: block;
}
.mobile_container {
display: none;
}
#media only screen and (max-width: 667px) {
.desktop_container {
display: none;
}
.mobile_container {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
<script type="module" src="script.js"></script>
</head>
<body>
<div class="desktop_container">
<div>Desktop</div>
<!-- PUT ALL DESKTOP CONTENT HERE -->
</div>
<div class="mobile_container">
<div>Mobile</div>
<!-- PUT ALL MOBILE CONTENT HERE -->
</div>
</body>
</html>
Instead of having two <body>, you can have <body><div id="body-mobile"></div><div id="body-pc"></div>.
Usually all you want to check is max-width:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="body-mobile">...</div>
<div id="body-pc">...</div>
</body>
</html>
I would suggest using e.g. Bootstrap CSS framework for easier responsive integration:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="d-block d-sm-none">...</div>
<div class="d-lg-none d-xl-block">...</div>
</body>
</html>
Test Links.
Using Bootstrap classes, modify the div element with the id "links" so that on extra small
resolutions (<576px), each link and ad takes one whole row. It should look like this:
On small resolutions and higher (≥576px), both links should take one half of the row and the ads
should be invisible. It should look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tests</title>
<link
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<style>
a,
div {
outline: 1px solid black;
}
</style>
</head>
<body>
<div id="links">
Aptitude tests
<div>Ads!</div>
Programming tests
<div>More ads!</div>
</div>
<article>Here you can find various tests...</article>
</body>
</html>
You are getting close with your answer. To get it to work, these are the changes you need to make to the original code in your question:
add the class row to the container that has your cols (i.e. the links div) - cols must be in a row
Add col-12 col-sm-6 to the a elements (you just had the wrong breakpoint when you said col-12 col-md-6) Ref: Bootstrap breakpoints, Bootstrap Grid Mix & Match Col classes
For the divs, add d-sm-none to hide it on small screens (Ref: Bootstrap Display property) and col-12 to show it full width on all other screens.
You can see it working here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tests</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<style>
a, div {
outline: 1px solid black;
}
</style>
</head>
<body>
<div id="links" class="row">
Aptitude tests
<div class="d-sm-none col-12">Ads!</div>
Programming tests
<div class="d-sm-none col-12">More ads!</div>
</div>
<article>Here you can find various tests...</article>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tests</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<style>
a, div {
outline: 1px solid black;
}
#media (min-width: 576px ) {
#links {
display: flex;
flex-direction: column;
padding-right: none;
padding-left: none;
}
}
#media (max-width: 576px ) {
#links {
flex-direction: row;
}
}
</style>
</head>
<body>
<div id="links">
Aptitude tests
<div class="d-none d-md-block">Ads!</div>
Programming tests
<div class="d-none d-md-block">More ads!</div>
</div>
<article>Here you can find various tests...</article>
</body>
</html>
This is the code I got with it.
<head>
<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.3.1/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h2>Button Group</h2>
<p>The .btn-group class creates a button group:</p>
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
<style type="text/css">
button{
background-color:red;
}
</style>
</body>
</html>
In the above segment, Bootstrap is being used and when tried to apply the background-color property for the button tag,it is not being reflected.What is the reason for that?
Try to add !important:
<style type="text/css">
button{
background-color: red !important;
}
</style>
Or put your <style> upper, than your divs and buttons... sometimes that is the issue.
You can use !important, because bootstrap already written a style. So if you want to overwrite that style, maybe you will need to write it down under the bootstrap's style, otherwise you will need to add !important.
I think this website will help you to understand the reason of !important.
https://css-tricks.com/when-using-important-is-the-right-choice/
Im working with this bootstrap html file as the following:
<head>
<title>Bootstrap Example</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.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-sidebar w3-bar-block" style="width:35%">
<h2 style="margin-left:15px;">Some Favorites</h2>
Celery Root
Spaghetti Squash
Killer Mushroom
<input type="text" class="form-control" style="margin-left: 15px;">
<button type="button" class="btn btn-primary" style="margin-left:15px; width: 230px; height:50px; font-size: 20px;">Search Recipes</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
As you can see, i added an inline style to anchor so that the font is blue.
However, when i write the CSS style into the at the head section, the desired CSS effect does not get achieved. It was totally perfect to get the desired CSS effect by writing an inline style. Can anyone explain?
This is happening because bootstrap overwrite some html tags with his own css, so will not work:
<head>
<title>Bootstrap Example</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.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
a {
color: blue;
}
</style>
</head>
<body>
<div class="w3-sidebar w3-bar-block" style="width:35%">
<h2 style="margin-left:15px;">Some Favorites</h2>
Celery Root
Spaghetti Squash
Killer Mushroom
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
So to fix this, you have 3 ways to make this.
1) Put the style inside html tag like you had in your example.
2) Use !important rule to overwrite the tag and apply css always, is not recommended abuse of this method and use it always.
3) Add class or id and work with them, so the css will works fine. This is the most reccomended way to do it.
Here you got a working example for each point:
<head>
<title>Bootstrap Example</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.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
/* first-of-type to select only the first <a> tag and make this example*/
a:first-of-type{
color: green !important;
}
/* this class is inside the 3º <a> tag*/
.myAnchor {
color: blue;
}
</style>
</head>
<body>
<div class="w3-sidebar w3-bar-block" style="width:35%">
<h2 style="margin-left:15px;">Some Favorites</h2>
Celery Root
<a style="color:red;"href="#" class="w3-bar-item w3-button">Spaghetti Squash</a>
Killer Mushroom
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
:) Use this code.
Make sure the is in the head section. It's working for me.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.w3-button {
color: blue;
}
</style>
</head>
<body>
<div class="w3-sidebar w3-bar-block" style="width:35%">
<h2 style="margin-left:15px;">Some Favorites</h2>
Celery Root
Spaghetti Squash
Killer Mushroom
<input type="text" class="form-control" style="margin-left: 15px;">
<button type="button" class="btn btn-primary" style="margin-left:15px; width: 230px; height:50px; font-size: 20px;">Search Recipes</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
apply your style to a tag directly because in bootstrap style effects to a tag directly like this a {color: #337ab7;}
a.w3-button{
color: blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="w3-sidebar w3-bar-block" style="width:35%">
<h2 style="margin-left:15px;">Some Favorites</h2>
Celery Root
Spaghetti Squash
Killer Mushroom
<input type="text" class="form-control" style="margin-left: 15px;">
<button type="button" class="btn btn-primary" style="margin-left:15px; width: 230px; height:50px; font-size: 20px;">Search Recipes</button>
</div>
</body>
As others mentioned it before, Bootstrap is adding its own styles to html elements like colors, font-sizes, margins, etc.
I suggest, If you want your own colors, you can customize them in the bootstrap site, or you can write your own styles in a separate css file or in <style></style> tags.
But it has to be after you inserted the bootstrap.css file.
This is the style for the <a> tag from bootstrap:
a {
color: #337ab7;
text-decoration: none;
}
You can simple overwrite it in you css file (or in your style tag) like:
a {
color: #0000ff;
}
Or you can add your custom css class for an anchor tag like:
.my-anchor {
color: #0000ff;
}
then add it to your anchors in your html files
<a class="my-anchor" href="#"> my link </a>
If you want to deep dive, why is this happened, here is a good document.
In short, think about it, that each selector types has their own counter. The higher the counter, the stronger will be your style, (and harder to overwrite it).
Like in your example. Each styles has their own numbers which is 3 digits.
000
if you are styling just the html tag like this:
a {
color: #00ff00;
}
the counter will be: 001
But if you are adding a class selector :
.my-anchor {
color: #0000ff;
}
it will be: 010 which is stronger and your anchor color will be : #0000ff
If you add another class to your anchor tag, then the number will be: 020 and so on. If you add an id then the number will be 100 which is stronger than the 020.
Just like in the shared document for inline styles
Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
I'm not recommending to use !important beacouse after that, you will be confused, how to overwrite it. If it is a last resolt, then you can use it, but if you need to overwrite it, then the !important styles order will decide which one will be used.
Hope I didn't confused you and helped a little.
Well I've been trying to change bootstrap's well color, but it doesn't work, I've tried setting an image as background (the well's) and it worked, but that's not what I need. This is my HTML code:
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Default.aspx
</title>
<script src="Scripts/jquery-1.11.0.js" type="text/javascript"></script>
<link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="Styles/bootstrap-theme.css" rel="stylesheet" type="text/css" />
<link href="Styles/Default.css" rel="stylesheet" type="text/css" />
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/Default.js" type="text/javascript"></script>
</head>
<body>
<div class="well well-lg"><h1 class="">TIDE File Generation</h1></div>
<div id="mainNavigator">
<ul class="nav nav-tabs">
<li>Validate file</li>
<li>Catalogs</li>
<li>View History</li>
<li>Reports</li>
</ul>
</div>
</body>
</html>
And this is my CSS code:
.well{
background-color: rgb(22, 105, 173);
}
Is in the file Default.css
Thank you and regards.
Bootstrap 3 :
Set the background property and not the background-color.
.well {
background: rgb(22, 105, 173);
}
That should work.
Try and inspect the element in Chrome to determine if some other css is overwriting the background-color. By default .well already contains a background-color - make sure you are replacing this.
You can also use !important in your default CSS to override the well background color:
.well{
background-color: cyan !important;
}
That worked for me.
You can just add a style within the div where you declared your well.
Your code:
<div class="well well-lg"><h1 class=""> TIDE File Generation</h1></div>
Suggested code:
<div class="well well-lg" style="background-color: (color of choice);">
<h1 class=""> TIDE File Generation</h1>
</div>`