I have the website markedsføring på pizzabakker and I just can't figure out how to change the <h1> to be smaller on smaller screens. Can anyone please help me with that?
My CSS for the <h1> right now is just this:
font-family:'Coustard', sans-serif;
margin:0;
padding:0;
font-weight:300;
What should I do?
Matteo's code is correct. Try putting the code after the original h1 style.
If that doesn't help, try with:
#media screen and (max-width:360px){
h1{
color:white;
font-size:25px !important;
}
}
The other solutions are right but you can also try with this one. Alter the current CSS code to have 5vw unit which means it will autmatically calculate 5/100th of viewport width.
h1 {
font-size: 5vw;
}
You can use media queries.
The #media rule is used to define different style rules for different media types/devices.
In CSS2 this was called media types, while in CSS3 it is called media
queries.
Here is an example
#media screen and (max-width:360px){
h1{
color:white;
font-size:25px;
}
}
See this for information.
To develop responsive website I also suggest you to see Bootstrap
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Related
When I am in laptop/desktop view, the regular CSS styles are crossed out in the inspect element, and the query styles are active. Why is this happening?
For example, my code for the nav section (where my primary concern was at first, because that's all I've managed to get when targeting certain elements so far, responsively, before I noticed this issue) is below.
I've tried making sure the element names, div's, and id's.. all that are exact. I've also used percentages and pixels, both all the same and interchangeably. I've also made sure that I don't have two identical min-width media queries, that would cancel out one of the two.
CSS
/* Nav Section */
a.navbar-brand{
font-size: 90% !important;
}
/* About Section */
.mlAboutSec{
padding: 112px 0;
background-color: #f9f9f9;
}
.mlAboutSec h1{
font-size: 40px;
}
#media screen and (min-width:320px){
.mlAboutSec h1{
font-size: 20px !important;
}
.img-responsive{
width: 50% !important;
}
a.navbar-brand{
font-size: 90% !important;
}
}
Html
<div class="mx-auto order-0">
<a class="navbar-brand" href="#">Sample Logo Text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="jumbotron jumbotron-fluid text-center">
<img src="LogoImage.png" class="img-responsive" alt="Logo Image">
</div>
<div class="col-sm-8 fadeInUp animate">
<h1>About Section</h1>
<p>Sample Text Description about stuff goes here for the reader to view.</p>
</div>
I expected both font sizes to be reduced in size for mobile readability as well as the logo image to be scaled down for better mobile viewing purposes.
You say that your default styles are being overridden on desktop with your mobile styles, and if we inspect your styles, we can see why.
Right after you declare your normal styles, you then include a media query that says min-width: 320px.
.mlAboutSec h1 {
font-size: 40px;
}
#media screen and (min-width: 320px) {
.mlAboutSec h1{
font-size: 20px !important;
}
.img-responsive {
width: 50% !important;
}
}
This means your media query styles will kick in for any screen that is at least 320 pixels wide – even a desktop that is substantially more than that wide. In fact, in reality, your normal styles are never going to be applied because they would only happen between 0 and 319px wide, and even some of the smallest smartphones on the market (e.g., iPhone SE) are 320px wide.
If you want to declare default styles for desktop and override them on mobile, the simplest thing to do would be to simply switch out min-width for max-width in your media query, and nothing else would need changed; everything would work exactly as you expect.
However, I see in the comments that you are going for a mobile-first approach. In that case, you need to invert your entire approach. Your mobile styles would be the default ones, and then your desktop styles would go in a media query.
For example:
.mlAboutSec h1 {
font-size: 20px;
}
.img-responsive{
width: 50%;
}
#media screen and (min-width: 992px) {
.mlAboutSec h1 {
font-size: 20px;
}
.img-responsive{
width: 100%;
}
}
Another thing to note, since I saw discussion in the comments about the possibility of simply moving your media queries to the top of your stylesheet: While it's true that CSS cascades down the sheet, so styles lower down will override styles higher up, that's only true if the selectors for those styles have equal specificity. Media queries are more specific than normal styles and as such will end up overwriting your normal styles whether they're at the top or the bottom of the stylesheet, all else equal. (Which is to say that if you add in an !important or change from .mlAboutSec h1 to .mlAboutSec.someOtherClass h1 or something else, things get more complicated.)
In order to maintain simplicity, I would suggest you keep the media queries at the bottom of the stylesheet or at least immediately following their respective default styles and then use one of the two approaches above to modify things appropriately so things come out as you expect.
Note that in the example I have above of a mobile-first approach, no !important is needed anywhere because the selectors are all exactly the same inside and outside the media query and the media query comes after the default selectors, leaving no disagreement between specificity and the cascade.
So what I did was just change the font sizes for all the text/headings/links to still be easily read on all devices. Turns out that's all I really had to do and the scaling works, oddly enough. Thank you all for all the helpful input. I took every bit into account!
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 need some help. I am facing an issue with my blog template. http://www.candidopinions.in/
I have tried very hard to make it responsive to all mobile devices, however when the screen size is reduced to anything less than 321 pixels (like for iPhone 4 (320 x 480), I am facing problem with the social media buttons (just below My blog's name Candid Opinions) in the header and with the pagination buttons at the bottom. These two groups of buttons stack up. I am not very proficient with CSS but still I tried my best to resolve the issue but couldn't.
Can someone help me in making these buttons responsive?
#media screen and (max-width:320px){
.post-outer {width:100%;}
#search, #search-form {width:auto;}
#search-form { font-size: 14px; }
#breakingnews,.date-time {display:none}
#header,#header .description,#header h1,#header p,#header a{text-align:center;margin:0 auto;}
#header-wrapper{margin:0 auto;}
#wrapper,#menu,#menutop,#rapih,.tab{width:100%;margin:0 auto;}
#social_networks{bottom:20px;display:block;float:none;text-align:center;margin:0 auto;}
#social_networks ul {display:block;text-align:center;height:30px;margin:0 auto;}
#social_networks li{display:inline-block;float:none;width:30px;height:30px;
opacity:0.5;background-position:left top;border:3px solid #ffffff;border-radius:50%;transition:All 0.4s ease;}
#social_networks li:hover{opacity:1;background-position:left -30px;border:3px solid #e291fd;box-shadow:0 1px 3px rgba(0,0,0,0.5);}
#social_networks li a{display:inline-block;width:30px;height:30px;}
#social_networks li a span{display:none;}
#blog-pager{
font-size:13px;
line-height:20px;
padding:2em 0;
}
.showpageNum a,.showpage a,.showpagePoint{
margin-top:11px;
margin-bottom:16px;
margin-left:4px;
font-size:13px;
padding:6px 10px;
}
}
#media screen and (max-width:240px){
.post-outer {width:100%;}
#search, #search-form {width:auto;}
#breakingnews,.date-time,#menutop {display:none}
#header,#header .description,#header h1,#header p,#header a{text-align:center;margin:0 auto;}
#header-wrapper{margin:0 auto;}
#wrapper,#menu,#rapih,.tab{width:100%;margin:0 auto;}
#social_networks ul{bottom:20px;}}
Social icons At the moment, it looks as though your social buttons are behaving responsively, flowing onto multiple lines when there's no longer room for them to fit on one line in the viewport. This only seems to kick in below 330px, and is fairly standard behaviour, but if you'd like to keep them all on one line then you could use a media query to control the width and height of the list items:
#media screen and (max-width: whatever) {
selector {
width: Xpx;
height: Xpx;
padding/margin: (to control vertical/horizontal spacing)
}
Some quick thoughts on this:
1. Bear in mind that this can make the logos very small and hard to click on on mobile, so it might be better for accessibility/usability to just have them flow onto multiple lines but retain their size, as they do now, particularly for a potentially v small group of users on devices <330px.
2. Consider having a go with iconfonts to display your Facebook, Twitter, etc, logos. Using background images as you do currently makes resizing very difficult, whereas with iconfonts it's much simpler and will allow for cleaner HTML. More on those here: https://css-tricks.com/html-for-icon-font-usage/
Pagination units For me, on Chrome, these are overflowing the page on mobile widths. Perhaps switch to the same usage of li tags rather than spans for each page number - this will give you cleaner, semantically correct code and you can then just apply display: inline-block to allow them to behave responsively. Same tips as above apply from there.
I am trying to write some css for an element with an id #myid, specifically for a viewport in bwetween 768 and 1024px. I have the desired css in
#media (max-width:1023px) and (min-width:768px){}
tags. My trouble is that it is getting overwritten by some css, unscoped by a media query, that comes later in the .css file. Because I would like there to be a default look for browsers that don't support media queries, I don't wish to wrap the unscoped css in another media query. Is there any way to avoid this problem and still keep consistent non-media query styles for browsers that don't execute #media?
You have a three options I can think of.
Move the #media .query to the bottom of your CSS file
Move your #media query to a separate file and import it last (after the main CSS file).
Add important to evey line of CSS in the #media query (not recommended)
Example:
#media (max-width:1023px) and (min-width:768px){
body{
color: #000 !important;
background-color: #fff !important;
}
}
body{
color: #fff;
background-color: #000;
}
edit: added a link to jsfiddle, http://jsfiddle.net/h280xb6p/
Im currently practicing responsive design. Whenever the browser window gets below 400px the structure of the content change.
I have this menu that I use the structure of <a>. What I need help with is to change the html code from <a> to <option> whenever someone with a max-width of 400px or lower enter the site.
I know it's possible to change the appearance, like CSS rules with media query, but is it possible to substitute html code with another html code?
Subject: #menu
#media (max-width:400px){
section#box1, section#box2{
float: none;
width:100%;
}
section#menu {
}
}
To answer your question: It's for sure possible to subtitue html code with some other html, this i something you want to do with Javascript/jQuery. You CANT do this with CSS.
To solve your problem you should make 2 elements, one normal menu and one select element. Then show and hide them depending on screen size, take a look at this fiddle http://jsfiddle.net/77khhzpx/
#media (max-width:400px){
section#box1, section#box2{
float: none;
width:100%;
}
#menu {
display:none;
}
#mobile-menu{
display:block;
}
}