I'm using Twitter's bootstrap (responsive) css in my application. I want to have banner ads in my sidebar but depending on which media query is active my sidebar will be a different width meaning that my banner ad will also need have a different width.
How would you suggest that I go about swapping out banner ads depending on the currently active media query? I know that I could use jQuery to watch for changes in the browser's widths and swap them out that way but is there an existing solution out there somewhere like a jQuery plugin?
This is essentially already built in to Twitter Bootstrap. Bootstrap has a few classes called .visible- and .hidden- which are used in conjunction with phone, tablet and desktop to show and hide items on different devices.
You would then simply include X different versions of your banner, for example:
<div class="ads">
<img class="visible-phone" src="smallest.png"/>
<img class="visible-tablet" src="medium.png"/>
<img class="visible-desktop" src="large.png"/>
</div>
Of course, if you wanted to set custom css properties for the media queries then you can add your own ones. This is how Bootstrap does it:
#media (min-width: 768px) and (max-width: 979px) {
.visible-tablet {
display: block;
}
...
.visible-desktop {
display: none;
}
Related
I'm making a new Drupal site which is based on a non-bootstrap theme and makes heavy use of blocks to place content.
Some blocks display content that is better to hide on smaller screens to have a nicer look and feel. I want to hide them, but I don't know how to do it.
I'm using Drupal 9. I understand that there are some modules that can help in this situation, but those I know don't work with D9.
Why use modules when CSS will do, something like
#media only screen and (max-width: 600px) {
.blockname {
display: none;
}
}
I working on a website which has vertical navigation menu on left side. now i have to reduce the width of navigation menu but when i reduce width with normal css for desktop view it also affect the mobile view, it also reduce the width in mobile view.
So is there any other solution from which the css should apply only for desktop view. it should not affect the mobile view menu header.
Thanks
How to apply css only for desktop view in wordpress.
1.) desktop view media queries.
#media only screen and (min-width:768px){
here your code ...
}
#media only screen and (min-width:910px){ <!-- wordpress. twentysixteen theme -->
here your code ...
}
================================================
How to apply css only for Mobile view in wordpress.
#media only screen and (max-width:767px){
here your code ...
}
#media only screen and (max-width:909px){ <!-- wordpress. twentysixteen theme -->
here your code ...
}
===============================================
/* saf3+, chrome1+ */ you have any problem chrome, and safari, mobile view and desktop then use below this media
#media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
Use media queries. Decide a minimum width for your desktop view. It should look something like this.
#media only screen and (min-width: 1000px) {
/* Css for Desktop goes here like sample below*/
.desktop-header{height:100px;}
}
Remember you need to use min if you only want to change elements for your desktop view, this means all widths equal to or beyond the pixels you choose.
Also you need to use
<meta name="viewport" content="width=device-width, initial-scale=1">
in the head of your html to be responsive. *Note beyond media queries you would have to use a type of agent detection, this will see what platform the user is on based off of the browser and serve up content based on that, but I do not recommend this method.
Use css media queries for desktop device only
example:
Desktop
#media only screen and (min-width: 1200px) and (max-width: 1920px) { .classname{width:250px}
}
here goes links for desktop and mobile media queries Media Queries: How to target desktop, tablet and mobile?
I have a following code :
<div class="row">
<div class="hidden-xs">
<h1>Hello</h1>
</div>
</div>
and I expect it to be invisible when width will be smaller than 480px as it's default value in bootstrap css files. However, using Google Chrome simulator it becomes invisible when I set width smaller than 768 - so it works like hidden-sm. When I change hidden-xs to hidden-xs-down it always stays visible.
What I do wrong ?
First of all you should double or triple check that your page loads jQuery before anything else. After that should follow the Bootstrap's JS and CSS libraries.
Bootstrap's default class hidden-xs should work just fine if the framework is able to load correctly, no changes to any CSS or JS required at any point. I would also like to mention that hidden-xs-down is not Bootstrap standard, and that explains why it does not work.
What comes to the default breakpoints, 768px is actually XS, while 992px is SM and so forth.
In case you want the div to disappear when the width is below 480px, you should create your own class. To do so, just put the following to your CSS:
#media (max-width: 480px)
{
.hidden-xxs { display: none; }
}
On mobile devices, my post's title and date are clashing and overwriting each other. This looks awful. Here is my site. http://defensionem.com/200-russian-soldiers-along-with-t-90-tanks-in-syria/
It is on Wordpress.
How do I fix this? There are no options in the Theme and I can use Custom CSS.
I tried to hide the date but it did not work.
.meta--items_fl{
display:none !important;
}
What you can do here is write media queries to hide specific elements or change their related css at certain screen lengths. For example,
#media only screen and (max-width: 700px) {
div.meta--items.fl {
display: none;
}
}
The above code would hide the date at a screen width of 700px and below. You can mess around with the width the breakpoint triggers to see what works best for you.
To learn more about media queries, you check this out. Hope that helps!
I am trying to make my opencart responsive. I followed the instructions from here: How can i make my current opencart theme responsive?
but every time I want to change something in mobile.css it affects desktop.css. For example I put #footer{ display:none;} in mobile.css but as a result it kills footer in desktop and tablet.
Do I miss anything?
The mobile.css will still affect other screen sizes. Wrap your desktop.css with this:
#media (min-width: 970px) {
}
To display the footer add this to the desktop.css (within the media query above):
#footer { display: block; }
Based on your comment above it looks like you should change "max-width" to "min-width" in the media query on desktop.css.