I'm not sure how to explain this. I'm using inspect element to configure css for elements. I find the element I want to make modifications to for instance:
a.WTBText {
font-size: 11px;
color: #000000;
}
I take what I found above in inspect element and add the following to my css.
a.WTBText {
font-size: 15px;
color: #105194;
}
When I refresh the page and inspect the element I see the following. The css I modified did not get applied. (same as before)
a.WTBText {
font-size: 11px;
color: #000000;
}
Just below this I see
media screen
a.WTBText {
font-size: 15px;
color: #105194;
}
Where is this media screen heading coming from? I am not placing the css under any media css queries.
The #media rule is used to define different style rules for different media types/devices.
For instance, if you have #media (max-width: 300px) those values will only show on a device or screen that is under 300px wide.
Check out this link. http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Related
I added Bootstrap to my project, but it seems like the headings sizes are fixed and can't be changed. I'm trying to change the font size of my project, as my h1 and h2 text looks really big on mobile devices. For some reason, when I change the font-size of h1 and h2 tags, it seems to be ignored, and when I inspect it, they have lines through the code that adjust the font-size. I tried adding media queries too, but it is not working.
Code:
h1{
font-size: 15px;
padding-bottom: 0px;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #E85A4F;
}
h2{
font-size: 17.5px;
}
p{
font-size: 15px;
}
#media only screen and (min-width: 576px){
h1 {
font-size: 20px;
padding-top: 25px;
}
}
The odd thing is when I adjust the paragraph font-size, it works fine. Is there a way I can adjust the heading font size in the same way?
The lines through the code mean, that the style is overwritten.
This image shows the font size of the h1 of the code below. As you can see, there are multiple styles for h1. The one that is displayed at the top in the style panel (image above) gets applied. (This is the selector with the highest specifity, if there are multiple ones with the same specifity the last of the last stylesheet gets applied). On the right side you can see the file and the line where the style is applied.
To solve your problem you can:
Remove the code in the file and the line that is overwriting your headline style
Use a selector with a higher specificity, in this case for example h1.headline.
Add important to your style (font-size: 30px!important;), Note that this is the easiest but dirtiest solution
h1{
font-size: 30px;
}
#media only screen and (min-width: 800px){
h1{
font-size: 20px;
}
}
/*
a lot more css
*/
h1{
font-size: 35px;
}
<div>
<h1 class="headline">Test</h1>
</div>
I'm trying to make our web page device responsive with #media. However, I get the errors "Expected RBRACE at line 44, col 3." and "Unexpected token '}' at line 48 col 1.", even though the code looks fine to me. Does anyone have a solution to this?
I've tried to fix the code according to the errors, but that just messes up the #media-portion of the code totally. I've also ran the code through code examiners and the errors remain.
.content {
font-family: 'Lora', sans-serif;
font-size: 48px;
#media (min-width: 480px) {
width: 70%;
margin: 0 auto;
}
}
My goal is to put the code above in css and then use
<div class="content">text goes here</div>
to make our texts look better. However, because of the errors in the css, the div class-line does not have any effect.
You cannot nest a #media query inside vanilla css like this.
You should re-write your css to look like this:
/* outside the media query */
.content {
font-family: 'Lora', sans-serif;
font-size: 48px;
}
#media only screen and (min-width: 480px) {
.content{
width: 70%;
margin: 0 auto;
}
}
Only replace rules where necessary. This will reduce the amount of code you have to write. Also, have a look at https://sass-lang.com/, it will make writing css much easier!
As a general rule of thumb, I tend to place all my #media rules at either the bottom of the stylesheet or in another stylesheet. The idea is that you specify the generic rules at the top of the page (like font-size, font-family, width, etc) then only when you need to, specify what should change and at what viewpoint (like the code I have provided).
Let me know if this is unclear for you!
I'm currently trying to mimic this layout using HTML/CSS. Attached is what it should look like on Desktop and Mobile. For mobile, I'm not 100% sure the best approach for this. Notice how the image comes before "Bowers & Wilkins".
The layout is 100% browser width btw. My initial thought was to use flex boxes for this...but I'm not 100% sure if it's the right approach. I'm currently pretty new to using flex boxes.
Simplest way would probably be to float the image to the right at desktop res (initially shown in a single column in the demo when you run the below snippet - effectively mobile res. If you switch to full page mode, you should see the element order change so the image floats to the right):
body {
font-family: Arial, sans-serif;
background-color: #aaa;
padding: 1em;
font-size: 14px;
}
h1,
h2,
p {
margin: 0;
color: #fff;
}
/* float image to the right, half the width of the viewport */
img {
float: right;
margin-left: 1em;
width: 50vw;
}
h1 {
font-size: 1.25em;
font-weight: normal;
}
h2 {
text-transform: uppercase;
font-size: 1em;
}
#media only screen and (max-width: 767px) {
/* at mobile res, remove the float so the image appears back between the headings */
img {
float: none;
margin-left: 0;
margin-bottom: .75em;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" />
<h1>Exclusive offers from our partners</h1>
<img src="http://lorempixel.com/output/technics-q-c-200-200-4.jpg" />
<h2>Bowers & Wilkins</h2>
<p>It's one thing to dress well for your party. It's another thing to host it well ...</p>
I would definitely recommend bootstrap as a good solution for this. They have pre-built CSS classes that can pull and push and rearrange objects like this automatically.
Here the classes would be class="col-md-6 col-md-push-6" and class= "col-md-6 col-md-pull-6"
Hi I'm still new to web development. So I have a register page that floats as a div above the main page but I was wondering how do I ensure that the div gets centered in a responsive manner?
The pages are separated and included at the header.
<?php
include ('includes/login.php');
include ('includes/register.php');
?>
my register's css
#regScreen {
padding: 5 5 40px 5px;
margin: 0 auto;
position: fixed;
top: 5%;
left: 33%;
z-index: 10;
display: none;
background: #ebebeb;
}
#regScreen:target, #regScreen:target+#cover {
display: block;
opacity: 2;
}
#reghead {
background-color: #e2e1e1;
text-align: center;
display: block;
padding: 0px 0px 10px 0px;
}
I tried to use media query on my #regscreen:
#media (max-width: 300px) {
#regScreen {width: 100%;
left:0%;
}
}
But using media queries doesn't seems to recognize the page as responsive as it is already small. From my understanding, please correct me if I'm wrong.
It's difficult to provide an exact answer without more infomation (it would be great if you added more of the HTML markup), however...
If the issue is that the floating div does not resize to fit various screen sizes (and since you're new to web development...welcome aboard!), there are a couple of suggestions I can make:
1) You may be overcomplicating it by trying to apply the #media (max-width:300px) media query. By simply adding the following styles, the registration form should resize accurately:
#regScreen {
/* The rest of your styles go here */
width:90%;
max-width:600px; /* em or rem value would be better than px... e.g. 37.5 em */
}
This would ensure that the width of the form is always either 90% of the screen width OR 600px, whichever is smaller.
2) If you think there may be an issue with the media query not trigerring, an easy way to test it is to make something really obvious happen at that breakpoint...for example:
#media (max-width: 300px) {
/* Test Style */
/* Turn background red when below 300px */
body{
background-color:red !important;
}
/* Your original styles */
#regScreen {
width: 100%;
left:0%;
}
}
By doing this, it should allow you to start troubleshooting whether it's your media query syntax or something else that is the issue; maybe the media query styles are being correctly applied (so your media query syntax is ok) but the new styles are being overwritten later in the CSS (or due to the specificity of certain rules).
If you add more info to your question, let me know and I'll take another look but until then, this should hopefully help get you on the right track.
I'm not sure about what is the element using those selectors, but I tried to make a sample html & css reference for solving your issue. Here is the link jsfiddle.net/3Le34w8p/
i already see one error just by looking
#media and (max-width: 300px) {
#regScreen {
width: 100%;
left:0%;
}
}
you for got 'and' before '(max-width: 300px)'
I am having some trouble with CSS, when i try the site on a mobile device the line height remains at 65px , this can be fixed by putting a !important in front but this is not the kind of fix i want, should i be using a class or something?
Thank you very much
/*Change the glyph size when necessary*/
#media only screen and (max-width:990px)
{
#IEGlyphPlacement
{
line-height: 80px;
}
}
#Glyph
{
line-height: 65px;
}
You're targeting a different element inside of the media query. The media query is targeting the element with an ID of IEGlyphPlacement, rather than Glyph (which you define in the non-media query code).
Update as follows:
/*Change the glyph size when necessary*/
#media only screen and (max-width:990px)
{
#Glyph
{
line-height: 80px;
}
}
#Glyph
{
line-height: 65px;
}