I'm building a responsive layout using the responsive grid system. Once the screen scales below 480px all my elements stack on top and take up 100 percent of the page width. This is great for mobile devices. Images however seem to get in the way and I would like to simply remove them once the screen scales below this value.
I'm using the #media function. Thanks for the tips
You can use the display:none; attribute in css.
Example:
#id_of_image {
display:none;
}
Use this in your #media.
What's wrong with:
#media (max-width: 480px) {
img { //or some specific element
display: none;
}
}
If you use CSS you're still downloading the images, and there's really no need for that if you can avoid it. You're better off checking for the device on the server, and, if it's a mobile device just omitting the tag from the page. You can use the Mobile Detect library for this, and then your code would look something like
<?php if($device != 'mobile'): ?>
<img src="">
<?php endif; ?>
http://mobiledetect.net
Of course, you can use display:none in your CSS as a fallback... :)
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;
}
}
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 seem to have run into a snag while working on a site.
What I'm trying to do is display certain sized ads only on certain devices (small ads = mobile, large ads = desktop, ect...) and make them display:none on all other devices outside of a certain pixel range.
So far everything is looking good; I've setup all the css classes like so:
#media screen and (min-width: 601px) and (max-width: 799px) {
.site-main {
margin: 0;
}
#secondary {
clear: both;
float: none;
width: auto;
display: none;
}
.tablet-only-ad {
display:none !important;
}
}
Everything works fine up until I get into the actual ad div... The current div is setup like this:
<div id="desktop-only-ad small-desktop-only-ad tablet-only-ad large-phone-only-ad">
<script>
ad script blah blah blah
</script>
</div>
I've tried copying all of the IDs into a class only, tried putting both class and id, spell checked, everything... Any help is greatly appreciated, thanks!
For starters, you have your ad inside an ID, so to show/hide this, in your CSS you need to target an ID, not a class, i.e.
#media screen and (min-width: 601px) and (max-width: 799px) {
....
#tablet-only-ad { /* note ID not a class */
display:none !important;
}
}
<div class="desktop-only-ad small-desktop-only-ad tablet-only-ad large-phone-only-ad">
note: class not id!
class attribute can support multiple values separated white space, and you can reference a class in css file whit a dot (es: .small-desktop-only-ad)
id normaly is a unique value es: id="secondary" and can be referenced in css with #id (es: #secondary)
Thanks for the help guys, I figured it out. I believe it was a mixture of space errors and a misunderstanding of the class/div difference. After shortening the class names and a small bit of testing I can confirm that the proper ads are displaying correctly on every device.
For reference to others:
Check your class names and shorten them if possible to prevent spelling or space errors.
You can only have 1 ID on a page, but multiple classes. I needed to change the ID to CLASS to get multiple classes to work.
Here is an example of one of the completed divs:
<div class="desktop small-desktop large-phone phone">
<script>
AD SCRIPT
</script>
</div>
Note, each class (desktop, small-desktop, large-phone, phone) all have display: none; in the css under their designated #media sizes which means they wont display once included in a divs class if the media size doesn't meet the requirements. There are 5 total classes (desktop, small-desktop, tablet, large-phone, phone) all with different size parameters and by taking away "tablet" the ad specifically picked out for tablets now shows ONLY on tablets since the device size requirement has also been met.
The explanation may be a little confusing since I just relearned all the class/id stuff this morning, but hopefully it'll help out :)
Got some weird stuff going on. Trying to fix up an old WordPress theme which was never designed for mobile and I found issues once I added media queries. They seem to be what I want overall on mobile devices but once I hit desktop, everything looks messed up as if it's adapting to the mobile media queries and I'm really confused as to why. Am I supposed to add something to the desktop styles to make this work overall? Here's my site in question: http://destinationbeershow.com/
If you have
<body class="mobile">
at your mobile version and you specify the .mobile in all your rules affecting only mobile, then I guess you will be out of the woods.
Actually, i just solved it. I had min-width for those elements when I meant to use max-width. Duh! I think I'm out of the woods.
You might want to clarify with at least one or two examples of the specific problems you're encountering, but just looking at one or two elements, remember some basic CSS rules.
When using media queries, any rules meeting the conditions will be triggered.
Rules overwrite each other top to bottom, which means whatever is listed last will be the property used.
If you're encountering problems when your rules look different, remember that whether CSS rules overwrite each other depends on a rule's specificity. (This is more of a side note, but important to remember. See this article on calculating CSS specificity if this is a problem you're encountering.)
For example:
#media (min-width: 768px) {
#content {
width: 656px;
}
}
#media (min-width: 480px) {
#content {
width: 100%;
}
}
Once the viewport (browser window size) is 480px your element with id="content" will be 100% width. Then, when your viewport is 768px, it will still be 100% width, because the second rule is overwriting the first one since both rules are true.
If you want rules to override the smaller media query rule, then you have to make sure your larger size media query comes after. For example:
#media (min-width: 480px) {
#content {
width: 100%;
}
}
#media (min-width: 768px) {
#content {
width: 656px;
}
}
Hope that makes sense.
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.