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 :)
Related
Would someone mind assisting me with the CSS code I need to have these 4 boxes with the text resizing the boxes for mobile devices (phones)..
This is the website... http://westmetrofire.stg.colorado.gov/
Here's the code (and I apologize I don't know how to use the coding section here).. I think the issue is here (and I need to come up with another #media section that defines the phone screen size)...
#media (max-width: 950px) and (min-width: 450px) {
.box {
text-align: center;
height: 180px;
I've tried several different things and the images gets all skewed.
Thanks for any assistance. Jim
Hello Jim,
#media (max-width: 450px)
.box {
height: 500px;
}
I switched the .box height and was able to get the headings, paragraphs, and the images inside the boxes on what would be an iPhone 12 Pro display. This does however lead to some whitespace below since not all the elements inside each box are taking up the same space. I am also fairly new to CSS, however if this were me I would look into adding a class for each box so you can size them individually until everything fits. For example .box-red or .box-blue. These can then be added to the HTML elements and styled under that media query.
I'm almost certain there is an easier solution, but maybe this well help in the meantime.
I am currently using DIVI Builder to build a simple website.
I have a fullwidth section, with a full width slider inside. The text inside the slider seems to behave differently on desktop versus mobile, so I figured i can help that with #media. What i have done so far is to create a duplicate, identical slide, adjust the 2nd of the two for mobile and hide the 2nd from desktop users. While I don't exactly know, I assume that this way will eventually slow down the page loading speed, so I resorted to #media.
The issue preventing this from working is that the media inquiry starts with:
#media all and (max-width: 980px) {
XXX {
margin-top: 100px;
}
}
The XXX represents the unknown for me, because I want to target the whole column, in this case automatically labeled as .et_pb_slide_0. From what I understand i cannot replace the XXX with a class, or in other words, something that starts with a . Is there any way to make this work ??
Media queries can contain classes like .et_pb_slide_0 or .anything_you_like!
This is valid:
#media all and (max-width: 980px) {
.et_pb_slide_0 {
margin-top: 100px;
}
}
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!
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 have the following code in my _header.html.erb
<a class="navbar-brand" href="#"> Brand </a>
I want this to display on mobile but not on large displays...
I have:
.navbar-brand {
visibility:hidden;
}
in my general css.
I use media queries to counter the above code, but not successfully.
#media screen and (device-aspect-ratio: 40/71) {
.navbar-brand{
visibility:visible;
}
}
The result is that, the brand shows up no-where.
The code above is intended to target an iPhone5. Is it possible that other devices have the same a-r and the display won't be shown? Or is the above #media an appropriate way to accomplish what I am trying to achieve.
I would advise using width for media query to target phones, if your okay with a person minimizing the browser's width and seeing the same result
.navbar-brand {
display: block;
}
#media only screen
and (max-width : 321px) {
.navbar-brand {
display: none;
}
And yes it is possible other devices have the same ratio. Specifying this way is troublesome from my experience, and I advise the way above. If you really want to target a specific device, do a quick script check for user agent string of the specific device and load css special for that device below your regular css.
In CSS, if you have two rules that target the same element, there are a number of factors that control which one applies. The two that matter to us are specificity and order.
Specificity means "which rule is more specific?". Consider this HTML:
<div>
<p>Test</p>
</div>
And this CSS:
div p {
color: red;
}
p {
color: blue;
}
In this case, the text will be red. div p is a more specific selector, so that rule overrides the red text set by the p selector.
If two rules have the same specificity, then the order comes into play. Later rules have precedence. Let's change our CSS above to the following:
div p {
color: red;
}
p {
color: blue;
}
div p {
color: green;
}
Now we have two rules with the same specificity. The last one will apply, so our text will be green.
So how does this relate to your problem? In two ways:
Media queries don't increase specificity.
The Rails asset pipeline can change your CSS ordering.
If your mobile CSS is included in the same file as your desktop styles, make sure it's at the bottom of your file, so your mobile rules override your global rules above. And if you're putting it in a separate file, you're going to have to list all of your CSS files in app/assets/stylesheets/application.css and put your mobile.css at the very bottom of your //= require rules, so it gets loaded after all the others. If you allow the Rails //= require_tree . to include your mobile stylesheet, the order will be undefined (but is almost always alphabetical). Which means that your mobile rules won't apply if they're trying to override something in a file starting with something from the second half of the alphabet. Your un-media-queried rules will override the media queried ones.
I realize this is old, but the answer for me was slightly different, and while I don't like my answer as I try to avoid using (!important) when possible, the only thing that worked for me currently was to add !important after my desired visibility setting in the media query.
.menuNavDropdown {
visibility: visible !important;
}