I currently use Javascript to hide my social media buttons on the main page of my Tumblr site. It's programmed to hide them only on the main page based on the url in the browser, not on any other pages.
However, I'm curious as to if there's a way to do this with just CSS (or even CSS3), similar to how media screen can make conditions for divs based on browser size. I know you can have more conditions with PHP, but Tumblr won't allow it.
Depending on the Browser size you can hide ,for example
#media (min-width: 768px) and (max-width: 979px) {
.hidden {
display:none;
}
}
or
depending on the parent class
<body class="wrapper">
.wrapper .hidden{display:none;}
You should be utilizing {block:PermalinkPage} and {block:IndexPage}.
{block:PermalinkPage}
<div class="icons">
<p>This will only appear on permalink pages.</p>
</div>
{block:PermalinkPage}
You can go a step further by wrapping it in {block:Date} if you only want it to appear on posts and not pages.
Related
I am working with an HTML template, and I'm trying to replace the site's logo based on browser size using media queries.
I am trying the technique I found here: #media queries and image swapping
My custom.css file has this code:
.test-mobile-logo{
display: none;
}
#media only screen and (max-width: 500px){
.test-main-logo{
display: none;
}
.test-mobile-logo{
display: block;
}
}
My html file has this code for the logo:
<div class="logo">
<a href="index.html" >
<img src="images/logo-dark.png" alt="" class="test-main-logo">
<img src="images/logo-main.png" alt="" class="test-mobile-logo">
</a>
</div>
The page is showing both images at once though. But when I remove my style.css file, the images finally show one at a time and replace properly.
The style.css file: http://demos.webicode.com/html/lucian/html/css/style.css
I'm not sure what the conflict is, I'm still new to CSS. Does anyone have any ideas?
You have this style in your css that overrides your display styles.
img {
display: inline-block !important;
}
Remove the !important to make your media-query work.
I agree with #HenrikhKantuni use a background image and change the background image in the css media query.
Otherwise users will always be downloading 2 images, that's one unnecessary http request and kilobytes the user will be requesting, especially over mobile networks you want to reduce this as much as possible.
as #VincentOrback mentioned just delete the !important from img selector
Better technique: use background-image instead and just change the url, or (even better) use CSS Sprites
I have a site at www. structuredata. com
when the site is on a desktop it looks great. However when it starts to get narrow, the red 'register' button starts to overlap the menu,
I'd like to make a media query in my css that will force the button to drop down below the navigation when viewed on smaller screens. How would I do that?
the header is setup as
<div id="header_main">
<div class="container">
<div class="inner-container">
<strong class="logo"></strong>
<nav class="main_menu"></nav>
<div id="text-8" class="widget"> BUTTON IS HERE </div>
</div>
</div>
</div>
I tried setting my .header_main.widget
to a display:block and inline-block but neither worked. I tried clear:both on it as well.
Media queries can be tricky, you can read a lot about them here(w3c) and here(mdn)
In your case the media query will look something like so:
#media screen and (max-width:320px) {
#header_main .container .inner-container .widget {
/*Styles go here*/
}
}
Hope this helps!
Your navigation bar and your button are on a different z-index, so that's going to be tricky. That's also why clear did not work.
You could set up a media query to adjust the top position of the button (being that it is relatively positioned), like so:
#media screen and (max-width: 700px) /*Or whenever the button overlaps*/ {
#header .widget .avia-button-wrap {
top: 50px !important;
}
}
But then you'll probably have to adjust some other elements in your header to make everything look okay. But this should get you started!
I'm setting up an off-the-shelf shopping cart with a responsive design template. I have a section that is horizontally oriented with larger viewports and vertically oriented with smaller devices. I want to use copy that says "see to the right for [whatever]"... but on a smaller device, it isn't "to the right" but rather underneath. So I'd like to make it dynamically say "see below" when the viewport changes.
Possible? And simple? I don't want a mess of code that myself or other furture admin are going to have to adjust if they want to reword it. But if it can be done with a simple or whatever with all the code contained in css then that's fine.
Otherwise I'll accept "no" if that's the better answer.
You can do this using media query and the following approach.
Declare two spans having the desired data, one for large screens and other for smaller ones:
<span class="lg-view">See to the right</span>
<span class="sm-view">See below</span>
In css, display the lg-view span by default and hide the other one:
.lg-view{
display:inline-block;
}
.sm-view{
display:none;
}
Then inside media query, reverse the above styles:
#media screen and (max-width: 500px) {
.lg-view{
display:none;
}
.sm-view{
display:inline-block;
}
}
One way would be to use pseudo elements and media queries. You could do something like this:
HTML:
<div><!-- empty by design --></div>
CSS:
#media screen and (max-width: 300px) {
div:before {
content: "see below for [whatever]";
}
}
#media screen and (min-width: 301px) {
div:before {
content: "see to the right for [whatever]";
}
}
Obviously this is just a bare bones markup, but with a bit of tweaking it should do exactly what you want.
On Bootstrap 4, you could use the display property to easily manage this without writing media queries.
Sample below:
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
More information here: https://getbootstrap.com/docs/4.0/utilities/display/
My question is very very simple.(I am a beginner in the css/html/javascript)
I would like to hide a div in mobile browser and show that div in the other devices (PC&Laptop).
how can I do?
Take a look at the responsive utilities documentation of Bootstrap at http://getbootstrap.com/css/#responsive-utilities.
In this specific case you could for example use the class visible-xs-block to make a <div> only visible on the xs breakpoint that's used for mobile phones, and the class hidden-xs to make a <div> visible on all other breakpoints.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="visible-xs-block">only visible on xs</div>
<div class="hidden-xs">visible on everything but xs</div>
You can use media queries. For example you could use:
<style>
#media (max-width: 600px) {
.my-div {
display: none;
}
}
</style>
More information here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
I have this html and css code:
<div class="wrapper">
<div class="a"></div>
<div class="b"></div>
</div>
#media all and (max-width: 400px), (max-height: 300px) {
.wrapper .a {
....
....
}
wrapper. .b {
....
....
}
....
....
}
Now I want that whenever wrapper gets the class "like-small", all the styles of small screen will apply even if the screen is not small. I don't want to duplicate the css code inside the media query. How can I solve that?
Another solution is to force media query to apply. Is there any way to do it?
You can try with javascript. This sentence sets the viewport width and forces browser to apply your media query:
$('meta[name="viewport"]').prop('content', 'width=400');
This is taken from this answer:
https://stackoverflow.com/a/20137580/1401341
As someone says in the comments, this will work only with browsers which support viewport tag.
You can do something like this with a bit of javascript.
In a nutshell, you'll move your media queries out of the css, and test them in JS using window.matchMedia.
When you know which one matched, you can add a className to the <html> tag, similar to the way Modernizr works. So on a phone you'd see <html class="like-small">.
Your css will be written to take advantage of those convenience classes, rather than using the native media query:
.like-small wrapper.a {}
.like-large wrapper.a {}
(I also like to add .not-like-small, .not-like-medium classes to <html> as well, to further simplify the css)
So now, after the regular media query is matched and the appropriate classname is appended to the document, RWD works pretty much as normal. And if you want to force a particular style you can just rewrite the classNames on the HTML tag to affect the entire page, or add a className to any parent element to affect only part of the page.
In newer versions of Chrome you can "emulate" a mobile device in order to trigger / test your media queries in a desktop browser. (Internet Exploder 11 has the same behavior!) You may have to refresh the browser after applying the emulation; Chrome 35 still partially applies the media queries until I hit refresh in the associated tab.
I know this question is old, but hopefully this is what you were looking for (as there wasn't an answer). And I also don't know if adding a specificity class to your CSS broke your requirement not to repeat CSS.
You can achieve what you want to do by changing the definition of your #media query. Basically, instead of saying you want something to happen when the screen gets smaller than a value, keep your small screen CSS OUT of the media query and have your media queries set up for larger screens.
Then, you just need to change the order that you call the CSS and add specificity to the styles where you want to call the class like-small.
HTML:
<div class="wrapper like-small">
<div class="a"></div>
<div class="b"></div>
</div>
<div class="wrapper">
<div class="a"></div>
<div class="b"></div>
</div>
CSS:
.wrapper.like-small .a,
.wrapper .a {
height:200px;
width:200px;
background:purple;
}
.wrapper.like-small .b,
.wrapper .b {
height:200px;
width:200px;
background:blue;
}
#media all and (min-width: 400px), (min-height: 300px) {
.wrapper .a {
height:100px;
width:100px;
background:yellow;
}
.wrapper .b {
height:100px;
width:100px;
background:red;
}
}
And the fiddle: http://jsfiddle.net/disinfor/70n37hhj/
Hopefully this is what you were after (over a year and a half ago :)
Add the same class for those sections.
<div class="wrapper">
<div class="makeMeShine a"></div>
<div class="makeMeShine b"></div>
</div>
Where a and b can have their own custom styles :)