If one adds two responsive gadgets say,
A navigation bar with a media query like this in the navigation style CSS file
#media screen and (max-width : 760px){
nav ul {
position: static;
display: none;
}
nav li {
margin-bottom: 1px;
}
nav ul li, li a {
width: 100%;
}
nav .show-menu {
display:block;
}
}
and a responsive slideshow with the media query >
#media screen and (max-width: 65.3125em) {
.description,
.tiltview {
width: 100%;
}
.tiltview {
left: 0;
opacity: 0.3;
pointer-events: none;
}
}
#media screen and (max-width: 33.75em) {
.description {
font-size: 1.1em;
}
.slideshow > nav span {
width: 20px;
height: 40px;
margin: 0 10px;
}
}
#media screen and (max-width: 24em) {
.slides {
height: 320px;
}
.description {
font-size: 1em;
padding: 1.4em;
}
.no-csstransforms3d .tiltview.col,
.no-csstransforms3d .tiltview.row {
top: 0;
}
}
My question is , when opening the website on a mobile device the responsive effect DO NOT work and the site remains fullscreen , why is that ? Is it because I have different media queries on different CSS sheets with different widths ?
Have you tried adding this meta tag to your head of your html page?
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
In mobile view the navigation is all stacked up rather than in a line like the desktop template.
I would like the menu to be horizontal, the same way the desktop menu is, so it isn't taking up so much space.
/*************************************************
* Mobile Portrait *
*************************************************/
body {
overflow-x: hidden;
}
img {
max-width: 100%;
height:auto;
}
iframe {
max-width: 100%;
}
#media (max-width: 480px) {
.subscribe-box .block, .container {
width: 300px;
}
}
#media only screen and (max-width: 480px) {
.subscribe-box .block,.container {
width:320px;
}
.background-slider {
height: 320px !important;
}
#top-search{display:none}
#top-social {
float: right;
position: absolute;
z-index: 999999999999999;
right: 0;
}
#navigation-wrapper {
display:none;
}
.slicknav_menu {
display:block;
}
#logo img {
max-width:320px;
height:auto;
}
Are You asking for Menu in horizontal style.
If you are asking for horizontal menus style then you should search for Fletro menu in Google you will get a lot tutorial for that.
I am trying to make the telephone button responsive on mobile.
In my browser's developer tools everything seems good in every mobile screen resolution, but when I access the site from mobile the phone number is split into 2 lines, instead of making it one line in a box.
Example
html
050-475-1410
css :
* {
margin: 0;
padding: 0;
}
body {
overflow: scroll;
margin: 0;
font-size: 17px;
color: black;
line-height: 1.4;
}
#media only screen and (max-width: 2000px) {
.call {
/*Your styles on small screen - example only*/
width: 200px;
font-size: 30px;
.span{display: inline;}
}
}
#media only screen and (max-width: 600px) {
.call {
/*Your styles on small screen - example only*/
width: 150px;
font-size: 25px;
.span{display: inline;}
}
}
#media only screen and (max-width: 370px) {
.call {
/*Your styles on small screen - example only*/
width: 125px;
font-size: 20px;
.span{display: inline;}
}
}
#media only screen and (max-width: 330px) {
.call {
/*Your styles on small screen - example only*/
width: 120px;
font-size: 20px;
.span{display: inline;}
}
}
.call {
color: #2c3e50;
background: none;
border: 1px solid #2c3e50;
text-align: center ;
padding: 10px, 20px;
margin: 5px;
font-family: font1;
text-decoration: none;
position: relative;
cursor: pointer;
top: 2px;
}
HTML treats hyphen text as words, that's why they break down on small screen.
use white-space: nowrap;
also you can use these hyphen uni-codes ‑ or ‑
I want to create div in html with images and texx, but It should appears only on mobile version, how i can make this ?
Here is some code.
/*-- Mobile Design---- */
#media (min-width: 320px) and (max-width: 767px) {
/* put your css styles in here */
html,
body {
margin-top: 0;
margin-bottom: 0;
}
a.navbar-brand img {
padding: 0;
display: flex;
margin-left: 10px;
margin-right: auto;
width: 95%;
max-width: 200px;
}
.header {
height: 15%;
}
.navbar-toggler i {
font-size: 22px;
margin-right: 10px;
}
Hide the element by default and only show it when it fits your contraints. For example:
.yourElement {
display: none;
}
#media (min-width: 320px) and (max-width: 767px) {
.yourElement {
display: block;
}
}
Im trying to make a responsive header that changes font size for multiple different sizes of devices, but when using the #Media screen and (max-width: X px), it wont do any changes that i apply with it.
My code
#media screen and (max-width: 690px)
{
.container
{
width: 100%;
}
#header
{
width: 100%;
right: 0%;
}
#header h1
{
display: none;
}
#nav a
{
float: none;
display: block;
text-align: center;
}
#nav-right
{
float: none;
}
#nav:before
{
display: block;
position: absolute;
top: 10px;
right: 0%;
line-height: 40px;
font-size: 21px;
cursor: pointer;
}
#nav:after
{
position: absolute;
right: 0;
top: -15px;
height: 60px;
}
}
#media screen and (max-width: 509px)
{
#nav
{
font-size: 16px;
}
}
#media screen and (max-width: 409px)
{
#nav
{
font-size: 8px;
}
}
I just want it to change the font size, but its not working for what ever reason, please help
Thank you
W.
It needs to know where one starts and the other ends - this is done by one pixel for smooth responsive layout I usually find it easier to work from the low size up as the low size starts at zero pixels wide so no min-width needs to be mentioned.
I'm going to reorder your media queries narrow to wide screen:
#media screen and (max-width: 409px)
{
#nav
{
font-size: 8px;
}
}
/* now I'm going to put a min width on this so that it knows it's range does NOT start at zero and won't clash with the previous media query */
/* notice this is 1px bigger than the previous max-width */
#media screen and (min-width: 410px) and (max-width: 509px)
{
#nav
{
font-size: 16px;
}
}
/* now I'm going to put a min width on this so that it knows it's where it's range does NOT start at zero and won't clash with the previous media queries */
/* notice this is 1px bigger than the previous max-width */
#media screen and (min-width: 510px) and (max-width: 690px)
{
.container
{
width: 100%;
}
#header
{
width: 100%;
right: 0%;
}
#header h1
{
display: none;
}
#nav a
{
float: none;
display: block;
text-align: center;
}
#nav-right
{
float: none;
}
#nav:before
{
display: block;
position: absolute;
top: 10px;
right: 0%;
line-height: 40px;
font-size: 21px;
cursor: pointer;
}
#nav:after
{
position: absolute;
right: 0;
top: -15px;
height: 60px;
}
}
/* and there you have it */
have you added the viewport in your html file? if not then add viewport in head
tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here is a solution for your problem to apply media query when screen size changes.
I have written a sample of code just to explain the format of applying media query for different screen sizes:
body {
margin: 0 auto;
max-width: 100%;
width: 100%;
}
.footer_class{
position: fixed;
bottom: 0;
background: #dfdfec;
width: 100%;
text-align: center;
}
.header_class {
position: fixed;
top: 0;
background: #dfdfec;
width: 100%;
text-align: center;
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px) {
.title {
font-size:14px;
}
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px) {
.title {
font-size:20px;
}
}
<DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<Header class="header_class">
<h1 class="title">Header Section</h1>
</Header>
<article>
<p>Content Section</p>
</article>
<footer class="footer_class">
<h1 class="title">Footer Section</h1>
</footer>
</body>
</html>
let's break down your media query to two parts:
#media only screen
This means we will apply css styles to a device with a screen. The keyword only used here to hide style sheets from older browsers from seeing phone style sheet.
and (min-device-width: 320px) and (max-device-width: 568px)
This is quite obvious since it means that the specified css only applied when a device has a screen's size with minimum 320px and maximum of 480px in width dimension.
I hope this helps you to solve your problem.
I am learning how to make responsive websites. I downloaded Responsive Grid System and I am learning responsiveness with this system (you'll see what I have In html on screenshot).
Now I have some troubles with positioning. I use media queries. For mobile view from 320px to 480px I have no problem, but then when I want to make logo centered in range 480px to 768px I have problem with col span_6_of_12 (you'll see that also on the screenshot). I have logo in one col span_6_of_12 and then I have menu in second col span_6_of_12. When I want to make logo centered, this menu col span_6_of_12 is still there and I can't make this logo centered (I hope you understand me.)
HTML and Chrome view
- Here is screenshot of my HTML and Chrome view on site.
And here is CSS code:
html {
background-color: #FFF;
}
body {
width: 100%;
margin: 0 auto;
}
img {
width: 100%;
}
a {
text-decoration: none;
}
nav ul {
width: 100%;
text-align: center;
padding: 0;
margin: 10px 0;
}
nav li {
display: block;
padding: 10px;
}
#menu {
display: none;
}
#media screen and (min-width: 320px) and (max-width: 480px) {
#logo {
font-size: 2em;
text-align: center;
text-transform: uppercase;
margin: 0 auto;
}
#menu {
display: none;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
}
}
#media screen and (min-width: 480px) and (max-width: 768px) {
#menu {
display: none;
}
#logo {
text-align: center;
font-size: 2em;
text-transform: uppercase;
margin: 0 auto;
}
}