Develop Reference

Applying display:none in mobile/tablet view in html/css

I have a fiddle which is working perfectly fine in desktop view. On desktop view, it is working in a way that on click of any product item (as shown in the screenshot below), the description box gets displayed at the bottom.
In mobile view I am seeing all the description boxes gets displayed at the bottom without being clicked at the top.
The snippets of CSS codes which I have used for the mobile view:
#media only screen and (max-width: 767px)
{
.product-all-contents
{
overflow-x: auto;
}
.product-contents .product{
min-width: 50.795%;
margin: 0 2%;
padding-top: 3.91%;
padding-left: 3.91%; padding-right: 3.91%;
}
}
Problem Statement:
At the moment. I am seeing all the the boxes getting display at the bottom even it is not clicked.
I have feeling that I am using display: inline-block !important which is overriding display:none from the html
#media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
}
I am wondering what changes I should make in the CSS codes so that I can apply display: inline-block !important only to one product item instead of all items.

Just add this jquery for all the sections
$(window).resize(function(){
if ($(window).width() <= 767) {
$("#franchisehub").click(function(){
$(".franchisehubtv").css('display', 'inline-block');
});
//add this condition for all sections
}
});
And remove this css :
#media only screen and (max-width: 767px)
{
.goal-setting, .customization-tools, .custom-invoicing, .lead-tracking, .email-marketing, .royalty-calculator, .brand-control,
.franchisehubtv, .cloudbasedtextipad, .business-analytics, .tech-support, .employee-management, .order-management, .white-label {
display: inline-block !important;
}
}

You are setting all the boxes in the bottom to display:none except for the one thats active in your click handler. In that case you don't need the below css at all. I tried your fiddle and removed this css style and it works as you need in screen widths less than 767px as well
#media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
}

When you use !important in your css (external or internal) it overrides the inline style. So though you are setting it to display:none inline using jQuery , the internal style with !important overrides the inline style.
You can add a class like 'active-category' to the div thats selected instead of setting the display:inline-block and a class 'default-category' to all the default ones instead of setting display:none every time. And then target the active-category class in your css and set the style
eg.
#media only screen and (max-width: 767px) {
div.active-category {
display: inline-block;
}
div.default-category {
display: none;
}
}

Just add jquery as below:
$("#franchisehub").click(function(){
$(".franchisehubtv").css('display', 'inline-block');
});
//add for all items
Try if it works.
Hope this is what you want.

Difficulty toggling media query using Javascript

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");

How to reload the page only when window width changes from desktop (>1024px) to mobile (<1025px) navigation?

I have a mobile navigation only running below 1025px.
My problem is when a desktop browser is resized (or an orientation change on bigger tablets happend) from over 1024 to below it does not activate the script any more. I have tried with reload on resize, but this is not ideal because it reloads on every resize.
Here's my code:
<script>
$(window).bind('resize', function(e)
{
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function()
{
this.location.reload(false);
}, 100);
});
if (document.documentElement.clientWidth <= 1024) {
// Initialize mobile nav
}
</script>
Thanks!

add classes in every resolution and ask for them.
$( window ).resize(function() {
if(($(window).width()>1024 && $(".navigation").hasClass("mobile")) || ($(window).width()<1025 && $(".navigation").hasClass("desktop")))
this.location.reload();
}
but you should consider not to reload, but to hide/show the navigation via css media queries. reloading is a pain in the user experience:-)
Better solution:
in your css:
.desktop {
display: block;
}
.mobile {
display: none;
}
#media only screen and (max-width: 1025px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
In your html:
<div class="navigation desktop">your desktop navigation</div>
<div class="navigation mobile">your mobile navigation</div>
No js needed for that.

Responsive Nav Javascript

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.

Remove a tag in Runtime

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();