I'm making small web pages for fun and hosting them on my server just to learn stuff and sometimes i send them to some people i know to show them what i've learn but i'd like it so that my web pages aren't accesible to people on small screen.
i tried doing
#media (max-width: 800px){
body{
height: 0px !important;
width: 0px !important;
}
}
but it didn't work
Try this:
#media (max-width: 800px) {
html {
visibility: hidden;
}
}
#media (max-width: 800px){
body{
display:none;
}
}
A better way to do this is using window.innerWidth.
You can make an onload function that checks the viewport width.
window.onload = () => {
if (window.innerWidth <= 800) {
document.body.innerHTML = 'Page not accessible on small screens.'
} else {
loadDOM(); /* maybe put [display: none] on body as default and remove it here */
}
}
This method is better for the user. Atleast they'll know that they have to access the site from a larger device
Related
I am trying to descrease my website page to 80% for smaller pc screen I have tried a zoom approach using clientWidth but couldn't get any success.
For example :-
if (document.body.clientWidth < 1500) document.body.style.zoom = 0.8
But when i used this approach my website UI gets disturbed.
You can see in this image I am getting a white strip line which disturbs my whole website..
Any help with example would be appreciated!!!
Without any further Details I would assume, that there is some form of static height for the body in your stylesheet, this is why there is a white stripe at the end of the page.
May be you could take a look at this Question, which answers how to make a html body fullscreen.
But your approach seems legit, however you can achieve that also with plain CSS, i.e.:
<style>
#media screen and (max-width: 900px) {
body { zoom: 0.9; }
}
#media screen and (max-width: 800px) {
body { zoom: 0.8; }
}
#media screen and (max-width: 800px) {
body { zoom: 0.8; }
}
#media screen and (max-width: 700px) {
body { zoom: 0.7; }
}
</style>
Link to site
I'm trying to format the menu on the above site, when it's in sticky mode (i.e. scrolled down), because at certain widths the Request a Quote button is obscured by the screen. I'm using Javascript to action the change only when the screen is scrolled down, and an additional CSS class to move the menu. Unfortunately it's not working - while I can move the menu using just CSS applied directly to the existing class, trying to tie this in with JS to make it scroll specific doesn't any effect.
Is anyone able to tell me where I'm going wrong please?
Thank you in advance.
Javascript
<script type="text/javascript">
$ = jQuery;
$(function() {
//caches a jQuery object containing the header element
var header = $(".header-widget");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 20) {
$(".header-widget").addClass("header-widget-shortheader");
$(".second-header-widget").addClass("second-header-widget-shortheader");
$(".navbar .nav").addClass(".stickyheader-midscreen-cta-fix");
} else {
$(".header-widget").removeClass("header-widget-shortheader");
$(".second-header-widget").removeClass(".second-header-widget-shortheader");
$(".navbar .nav").removeClass(".stickyheader-midscreen-cta-fix");
}
});
});
</script>
CSS
/* -----Moves menu to avoid cutting off CTA button with sticky header on mid-sized screen (toggle with JS in 'Header & Footer')----- */
#media screen and (min-width: 980px) and (max-width: 1189px) {
.stickyheader-midscreen-cta-fix {
margin: 40px 22% 0 0;
float: right;
}
}
Thanks to Marian07 for the support. This is where I ended up:
/* -----Fixes menu CTA button being cut off by mid size screens----- */
#media screen and (min-width: 980px) and (max-width:1084px) {
.sticky-enabled .navbar-wrapper {
margin-left: 0;
}
.sticky-enabled .navbar-wrapper a {
padding-right: 9px!important;
padding-left: 8px!important;
font-size: 95% !important;
}
}
#media screen and (min-width: 1085px) and (max-width:1200px) {
.sticky-enabled .navbar-wrapper {
margin-left: 0;
}
.sticky-enabled .navbar-wrapper a {
padding-right: 3px!important;
padding-left: 25px!important;
}
}
The problem is at line 6:
$(window).scroll(function() {
(did not actually call the function on scroll)
Solution:
$(window).on('scroll', function() {
For your design problem, you can decrease the width of the headers on certain screen sizes by adding the below code at the end of file: /wp-content/themes/customizr-child/style.css
#media screen
and (max-width:1200px)
and (min-width: 980px) {
.sticky-enabled .navbar-wrapper {
margin-left: 0;
}
.sticky-enabled .navbar-wrapper a {
padding-right: 7px!important;
padding-left: 7px!important;
}
}
remove . use only class name
$(".navbar .nav").addClass(".stickyheader-midscreen-cta-fix");
replace
$(".navbar .nav").addClass("stickyheader-midscreen-cta-fix");
$(".navbar .nav").removeClass(".stickyheader-midscreen-cta-fix");
replace
$(".navbar .nav").removeClass("stickyheader-midscreen-cta-fix");
I am trying to make a responsive nav. I am using some jquery but I don't know javascript very well. I would like the toggle to take place when the window is a certain width (e.g. 1050px) this is the script
function adaptMenu() {
/* toggle menu on resize */
$('nav').each(function() {
var $width = $(this).css('max-width');
$width = $width.replace('px', '');
if ($(this).parent().width() < $width * 1.05) {
$(this).children('.nav-main-list').hide(0);
$(this).children('.nav-toggled').show(0);
} else {
$(this).children('.nav-main-list').show(0);
$(this).children('.nav-toggled').hide(0);
}
});
}
You can solve this by fixing the given javascript, but javascript is inefficient to handle responsive design. CSS engine is written in c++ and works faster, and automatically when browser is resized.
Better use CSS media query
The following snippet does the same as your javascript but with pure CSS.
<style>
#media (max-width: 1049px) {
nav .nav-main-list {
display: none; /* hide .nav-main-list when browser windows width < 1050px */
}
nav .nav-toggle {
display: initial; /* show */
}
}
#media (min-width: 1050px) {
nav .nav-main-list {
display: initial; /* show .nav-main-list when browser windows width > 1050px */
}
nav .nav-toggle {
display: none; /* hide */
}
}
</style>
EDIT:
As #Roko commented, media query does not work in IE8 and earlier. If you need support that browser, this post may help.
I have this code:
<h1 id="logo">
<a class="brand" href="/cgi-bin/koha/opac-main.pl">
CSU Library
</a>
</h1>
When my browser width is 701px and above, I don't want this to be seen (edit clarification: the element should be deleted from my html code); otherwise, the tag can be seen normally when my browser width is below 701px.
Is there any way I can do that? I don't know where to go from this code.
#media only screen and (min-width: 701px){
....??
}
This can be easily achieved in CSS if this is a responsive website you are building.
#media (min-width: 700px) {
#logo {
display: none;
}
}
For Modern browsers and IE9 and above you can use media queries like
#logo {
display: none;
}
#media (max-width: 701px) {
#logo {
display: block;
}
}
Try this as css
#logo { display : none; }
#media only screen and (min-width: 701px){
#logo { display : block; }
}
One method is to use media queries and another way is with jquery as :
$(document).ready(function(){
if($(window).width() > 701)
{
$("#logo").hide()
}
else
{
$("#logo").show()
}
});
OR
$( window ).resize(function() {
if($(window).width() > 701)
$("#logo").hide()
else
$("#logo").show()
});
According to the asker's comment... "but it leaves a blank space, and that's not what I want. I wanted it to be totally deleted from my html."
Yes, it is possible, but you'll need to use javascript. It is very simple with jQuery:
$("#logo").remove();
Well i do have the below query which is working fine without any problem. it is changing the background-image when i open it in explorer. and when i change the resolution it does not change the background-image automatically i need to refresh the page to change the background image.
i want to change it immediately when i change the screen resolution.
Please help....
<script type="text/javascript">
document.onload=pickIt()
function pickIt()
{
var w=screen.width
var h=screen.height
if(w==1440&&h==900)
{
//alert("1440x900");
document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1440x900.png')";
}
else if(w==1280&&h==800)
{
//alert("1280x800")
document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1280x800.png')";
} else if(w==1280&&h==768)
{
//alert("1280x768")
document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1280x800.png')";
} else if(w==1280&&h==720)
{
//alert("1280x720")
document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1280x800.png')";
}
}
</script>
You can use media queries for this. compatibility is still not the best, but it is growing: http://caniuse.com/#feat=css-mediaqueries
#media (max-width: 1200px) and (max-height:600px) {
html {
background: url(http://lorempixel.com/1200/600);
}
}
#media (max-width: 900px) and (max-height:500px) {
html {
background: url(http://lorempixel.com/900/500);
}
}
#media (max-width: 700px) and (max-height:500px) {
html {
background: url(http://lorempixel.com/700/500);
}
}
#media (max-width: 500px) and (max-height:300px) {
html {
background: url(http://lorempixel.com/500/300);
}
}
Demo: http://jsfiddle.net/32X57/
Why not simply document.getElementsByTagName('body')[0].onresize=pickIt ?