Currently I am working on a website to gain some experience, but I struggle to make changes only to the mobile version. For example:
<h1 class="intro-header__title">
<span>Are you ready to</span> Expand your horizon
</h1>
In order to make CSS changes for the desktop version I have:
.intro-header__title {
font-size: 2.6rem;
font-weight: 700;
margin-bottom: 15px;
}
Now I want to hide the follow part on the mobile version:
<span>Are you ready to</span>
So what I tried is the following:
#media (min-width: 768px){
.intro-header__title {
display:none;
}
}
#media (min-width: 960px){
.intro-header__title {
display:none;
}
}
Unfortunately this does not seem to work. I have the same problem with text that is compressed on the mobile version. I would like to change the borders only on the mobile version and not the desktop version. Here is how it currently looks (compressed text due to borders):
You need to add the media type to the #media query (in this case "screen"). Your current rules are also only used on screens with a width of more than 768px or 960px. But you want to format the mobile version so you have to use the max-width instead of min-width:
.intro-header__title {
font-size: 2.6rem;
font-weight: 700;
margin-bottom: 15px;
}
/** all screens up to 768px width */
#media screen and (max-width: 768px) {
.intro-header__title span {
display:none;
}
}
/** all screens up to 960px width */
#media screen and (max-width: 960px) {
.intro-header__title span {
display:none;
}
}
<h1 class="intro-header__title">
<span>Are you ready to</span> Expand your horizon
</h1>
Note: You also use two media queries doing the same. So the first media query (max-width: 768px) isn't needed because the other media query do the same on a larger screen.
You can find a useful list of screen sizes for the different devices on StackOverflow: Media Queries: How to target desktop, tablet and mobile?
Related
I'm having hard time trying to fix this small issue with my website, so the body text shows in white on the desktop, which is good, but when I use the smaller devices I don't want the text to show white because it collapse with the white background and you can't read the text. How can I change it to another color for mobile versions, with CSS, or HTML?
This Is How It Shows On Desktop
This Is How It Shows On Smaller Screens (Phones, Tablets, etc)
Edits from Stackoverflow (that didn't work)
CSS:
#media only screen and (max-width: 600px) {
.mob1 {
color: #ffffff;
}
}
#media only screen and (min-width: 600px) {
.mob1 {
color: #000000;
}
}
HTML:
<p style="color: aliceblue;" class="custom-article wow fadeInDown" data-wow-delay=".2s"><span class="mob1">Changed Text</span></p>
I tried to add the mob1 to the p class, didn't worked either.
Try to use media queries.
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
For more details: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
try this
on the html file, if it is a p element, or whatever type of text element it is,
<p class="colourTest">TEXT</p>
in the css file:
//for screens smaller then mobile
#media only screen and (max-width: 600px) {
.colourTest {
text-color: black;
}
}
//for screens bigger then mobile
#media only screen and (min-width: 600px) {
.colourTest {
text-color: white;
}
}
Is there a way to do this with html and css or can I only do it with javascript/bootstrap? I'm fairly new to coding so detailed explanations if possible would be nice!
You can do that with css media query. If you are begineer here is a small tutorial on that CSS media query.
According to mobile device size you can hide the navbar.
EXAMPLE:
#media only screen and (max-width: 600px) {
.navbar{
display:none;
}
}
You can hide show with the help of #media screen to show or hide the code in different devices sizes.
Examples:
#media screen and (max-width: 767px) {
.hide_on_mobile {
display: none;
}
}
#media screen and (min-width: 768px) {
.hide_on_mobile {
display: block;
}
}
Yes you can.
There several approaches to do that
Detect device is touchable (e.g. with Modernizr like tools) - I do not recommend, cause nowadays event laptops provided with touch displays.
By device's viewport - here's the good table list with most popular devices viewports by Adobe
I prefer second approach
So the solution comes in hand with CSS media-queries
And read about mobile first techniques
Example (press the Full page button after running snippet to look how it's gonna look in desktops)
<style>
#navbar {
display: none;
}
#media (min-width: 640px) {
#navbar {
background: lightblue;
height: 60px;
}
}
main {
background: #ccc;
min-height: 40vh;
}
</style>
<div id="navbar"></div>
<main></main>
I am updating a text element which ID has if7ou.
Issue is that if user update style on mobile view first and then the tab view then media query do not work for tab view. If we update style for desktop first, tab second and mobile third then everything works fine
but if we reverse the step mobile view first, tab view second and desktop view third then css/media query will not work for tab and desktop view.
So I want any option that we can add css in any order either 480 first and 992 second or vice-versa css should be apply based on device size not the based on order on which they come.
#media (max-width: 480px) {
#if70u {
font-size: 20px;
}
}
#media (max-width: 992px) {
#if70u {
font-size: 40px;
}
}
I think it was due to 480 should be down and 992 should be above.
Any help would be appreciated, thanks!
I would suggest to use min-width instead of max-width. This will ensure that the 992px styles will not load or appear in your mobile view. It will also better satisfy the requirement of "mobile first", in that you are only loading mobile styles for mobile, and then adding tablet styles only when the viewport grows for tablet, and so on. This will also solve your issue.
#if70u {
font-size: 20px;
}
#media (min-width: 481px) {
#if70u {
font-size: 40px;
}
}
In general, I use max-width sparingly, and often, when I do need it, it's because I created some sort of crappy code that has consequences later on down the waterfall.
In this case you should use mobile-first technic, declarations on the main class apply to mobile, then you increase your media-queries to bigger devices, take a look:
#if70u{
font-size: 14px; //Its apply for mobile
}
#media screen and (min-width: 768px){
#if70u{
font-size: 16px; //Its apply for tablets
}
}
#media screen and (min-width: 992px){
#if70u{
font-size: 18px; //Its apply for small desktop screens
}
}
#media screen and (min-width: 1200px){
#if70u{
font-size: 20px; //Its apply for large desktop screens
}
}
In addition to #S. Dunn answer.
If you want to set a style to specific minumum and maximum width you can use this:
#media only screen and (max-width: XXXpx) and (min-width: XXXpx)
So in your case it would be:
#if70u {
font-size: 20px;
}
#media only screen and (max-width: 992px) and (min-width: 481px) {
#if70u {
font-size: 40px;
}
}
I'm trying to understand why my css is always applying the h1 font size in landscape instead of portrait when I am in portrait (I'm a noob in responsive design).
Anyone have an idea of what I'm doing wrong ?
Thank you !
Guillaume
**** edited new version: now working.
/* FOR MOBILE */
#media only screen
and ( max-device-width: 736px){
.coursBox1{
/* Useless CSS */
}
.coursBox1 h1{
/* Useless CSS */
}
}
#media only screen
and ( max-device-width: 736px)
and ( orientation: portrait){
.coursBox1 h1{
font-size: 10px;
}
}
#media only screen
and ( max-device-width: 736px)
and ( orientation: landscape){
.coursBox1 h1{
font-size: 100px;
}
}
You have some errors in your code. You don't use , in between logical operators. You're also missing a closing }. Also, your media queries are very specific due the and operator.
As a beginner, I would drop the logical operators and only work with the device-width property as this the key value in triggering your queries. Once you understand how this works in your browser, start adding the logical operators.
If you are looking to make adjustments to your font-size or anything else for mobile devices such as tablets and smaller, then you can use something similar:
/* This generally targets both tablets and phones */
#media (max-width: 1024px) {
h1 {
font-size: 21px;
}
// other styles targeted to tablet/phone devices
}
/* This generally targets phones sizes and smaller */
#media (max-width: 768px) {
h1 {
font-size: 18px;
}
// other styles targeted to phone devices
}
This is just a guideline.
See these resources for a range of devices out in the wild with their corresponding sizes:
- http://viewportsizes.com/
- http://www.mydevice.io/devices/
and some some pre-made media query snippets
- Media Query Standard Devices
CSS media queries - MDN
I have came across a problem, whenever I make my browser smaller the text stays the same and it doesn't go smaller. How do I make the text go smaller when I the browser gets smaller?
Please visit http://jsfiddle.net/xiiJaMiiE/PjbHs/ for my website
.home {
font-family:apple;
position:relative;
font-size:25px;
color:black;
top:20%;
display:inline-block;
}
Thanks in advance!
As mention above you need to use media queries if you want to change your font-size (or any other CSS value based on browser / screen size)
Below is example based on Mobile Screen Size
// Work For All Other Screens Except the one which we redefine in bottom
.home {
font-family:apple;
position:relative;
font-size:25px;
color:black;
top:20%;
display:inline-block;
}
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.home {
font-size:20px;
}
}
You only need to define value which you want to change browser rest all values form above style and only change font-size to 20px on screen size 320px
Keep in mind you need to include libraries like https://github.com/scottjehl/Respond in your page to support older browsers
This css should work for you... simply adjust/delete the query breaks as needed and adjust the font size as well.
.home {
font-family:apple;
position:relative;
font-size:25px;
color:black;
top:20%;
display:inline-block;
}
#media all and (min-width: 1281px){
.home{font-size:25px;}
}
#media all and (min-width: 1025px) and (max-width: 1280px) {
.home{font-size:22px;}
}
#media all and (min-width: 769px) and (max-width: 1024px) {
.home{font-size:18px;}
}
#media all and (min-width: 481px) and (max-width: 768px) {
.home{font-size:16px;}
}
#media all and (min-width: 321px) and (max-width: 480px) {
.home{font-size:14px;}
}
#media all and (max-width: 320px) {
.home{font-size:14px;}
}
I would highly recommend to not use px for font sizes, as each browser has a different standard font size to begin with. however there is an alternative which can give you the result you want across all browsers, old and new.
css:
#px {
font-size:25px; /*this was the size you want*/
}
#percent {
font-size:160%; /*this is what it is in % but give you the support for crossbrowser coding*/
}
incase you want to try it out here is the html to show you the difference
html:
<p id="px">HELLO</p>
<p id="percent">HELLO</p>
It's possible using viewport units but it does require a small amount of JS/JQ due to a minor bug.
http://css-tricks.com/viewport-sized-typography/
http://caniuse.com/viewport-units tells browser support
Codepen Demo
CSS
p {
font-size:1vw;
}
JQ
causeRepaintsOn = $("p"); /* could include any text related tags */
$(window).resize(function() { causeRepaintsOn.css("z-index", 1); });