I'm trying to make a responsive index for my website, for this, i'm using Firefox Responsive Design Mode. In 1920x900px, my #media is working perfectly. The problem is when i change to 1280x600px. He keeps getting the images positioning like i order in 1920x900px. I made some tests and other attributes for 1280x600px works ! Here's the comments in my code:
/* Para monitores 1280x600px */
#media screen and (max-height:600px){
#slider{
/* If i change this to display:none; it really disappear the tag,
which makes me guess the screen calc is doing ok.*/
height:73.5vh;
}
}
#media screen and (max-width:1280px){
#mainAtc{
margin-left:2vw;
}
#othAtc{
margin-left:0;
}
}
/* Para monitores 1920x900px */
#media screen and (max-height: 900px){
#slider{
/* But, if in 1280x600 i got display:none, and here i got display:block, he shows me the image. It's like it doesn't work just when i give same attributes to differente #media. */
height:51.6vh;
}
}
#media screen and (max-width: 1920px){
#mainAtc{
margin-left:2vw;
}
#othAtc{
margin-left:7.6vw;
}
#atcRest{
margin-left:2vw;
}
}
Someone could help me ? Thanks!
Related
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>
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?
In my responsive website I want to control the way the website is viewed in mobile devices, and forbid viewing from landscape mode.
I searched through the stackoverflow site and found the option of putting a warning message.
I tried the css code below but it didn't work. Do you have any suggestions?
#media screen and (max-width: 980px) and (orientation:portrait){
#warning-message {
display:none;
}
}
#media screen and (max-width: 980px) and (orientation:landscape){
.content {
display:none;
}
.mobile {
display:none;
}
#warning-message {
display:block;
}
}
The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.
#media all and (orientation:portrait) { … }
#media all and (orientation:landscape) { … }
Source : https://www.w3.org/TR/css3-mediaqueries/#orientation
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); });