I want to know the display CSS of a DOM element. Normally I would using something like document.getElementById('hello-world').style.display but when the style is being set using CSS #media Rule I do not see any change to this value.
Any reason why?
And how would I be able to get this information.
Here is an example to demonstrate https://codepen.io/liywjl/pen/JjYyqVv
Code:
HTML
<p id="hello-world">Hello world</p>
CSS
#media (min-width: 980px) {
#hello-world {
display: none;
}
}
JS
window.addEventListener('resize', function(){
console.log(document.getElementById('hello-world').style.display)
})
You can use
window.getComputedStyle(document.getElementById('hello-world')).display
However, then can be a delay between the the setting of the style and the page re-flow and this may be not work on all browsers.
I am working on a fiddle which is working perfectly fine in a desktop view.
The desktop view works in a way that on click of any 2 product items (By default, one remain selected) , the description box gets displayed at the bottom giving detailed explanation of those product items.
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:
In the mobile view, there is one small issue. The issue is that, I am seeing the explanation of both product items whereas only one should be displayed without changing the look of it i.e. items should remain piled up.
I want the mobile view to work exactly in a way as in the desktop view i.e. when we click one product item, the description box should display at the bottom and when we click another product item another description box should display at the bottom.
The reason why I have used display:inline-block !important because I want the items to pile up vertically in mobile view in html/css. Removing that will make the images and text squished.
This happens because of you have set display: inline-block !important; for div.franchisehubtv and div.cloudbasedtextipad in #media only screen and (max-width: 767px) which override your display: none; css.
Solution No: 1
You can remove those classes from the media query, so your #media will be like this
#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.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
.cloudbasedtextipad, .franchisehubtv {
flex-direction: column;
}
.tv img {
max-width: 100%;
height: auto;
}
}
Solution No: 2
You need to override those css by adding these lines
div.franchisehubtv[style="display: none;"] {
display: none !important;
}
div.cloudbasedtextipad[style="display: none;"] {
display: none !important;
}
Updated fiddle here
Update: You can set your layout using flex for small devices
Didn't get you clearly, can you please specify is this mobile view the one you want to be the same display in desktop? if so then i recommend you to check how to use bootstrap grid system and you can use their CSS as a benchmark.
Looking at your current solution, the second div has a style rule that is invoked below 767px, which forces it to display as an inline-block. By adding the !important declaration, this then overrides any other property declaration.
If you remove this rule, you'll get a broken layout, but the div is hidden as required.
As to the layout, the content within each div will need some refined flexbox rules, which can use the same breakpoint to switch between column or row direction:
flex-direction: column (for mobile)
flex-direction: row (for non-mobile)
One problem you have is because you set the display property as inline style in the HTML, so you have to use important to overwrite.
The second problem is that you are not having in count the display: inline-block on your jQuery.
You are going to have to change several things, I've changed the fiddle to account for these things, only works if you click in the buttons, on load you see both items, there are several ways you can do these things, I only want to make the minimal changes to show the result.
https://jsfiddle.net/zaefnson/2/
And on desktop probably doesn't work either, just like I said, there are several things you are going to have to change.
I have a mobile-menu which is toggled by js code when user clicks the mobile-menu-icon.
The problem I have is: when re-sizing screen from mobile view to large view, the menu is still open.
I used media query to hide the mobile-menu for large screens, but it seems the toggle method added display:block on the element and the media query cannot override that.
What's your approach to fix this problem?
Instead of using .toggle, use .toggleClass("hidden"). Then you can use CSS
.hidden {
display: none;
}
When the class is removed, it will get whatever styling is default for the media type.
#media only screen and (min-width: 768px) {
.mobile-menu { display: none !important; }
}
Try overriding the same by adding !important to display:none in media query for large screens
Or use a resize script like this:
$(window).resize(function () {
if ($(window).width() > 641) {
$(".mobile-menu").hide();
}
else {
}
})
How do you make a div disappear when reducing window width, leaving it's complete space available to other elements? I do not mean hiding piece by piece on overflow, but the whole element.
I came across this brilliant feature on the following URL:
http://flexslider.woothemes.com
Is javascript required or can it be done with CSS? I noticed the page is pretty much HTML5.
You can do this with just CSS:
#media all and (max-width: 480px) {
.mydiv { display: none; }
}
I'd like for my buttons to only be inline in certain browser widths.
Can this be done with CSS?
Failing that, can this be done with Javascript (fire a function when screen layout changes)?
Yes. You can use CSS resposive design techniques with attribute selectors to affect these elements.
#media only screen and (min-width : 320px) {
a[data-inline=true] {
display:inline;
}
}
Simply using display: inline-block actually works for me right now.