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;
}
}
Related
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!
After searching for a while, I found this WordPress template http://demo.wpmultiverse.com/newsted/ that suits my simple needs. But the problem that I am having is the responsive feature of this tempalate's homepage. All the other pages work fine while the homepage is broken when I resize the width of my browser to be that of a mobile screen. Even if I view it from my mobile screen it is broken.
I tried clearing the divs and I have messed around with the CSS for some time now but I can't get to the root of the problem. I am unable to understand why other pages work fine with the same CSS style and only the homepage with the posts list is messed up.
Put this on your custom css:
#primary-sidebar .widget {
float: left;
}
But you still need to set the media queries for mobile and tablet
and put the code above.
use this one:
#media (max-width: 768px){
#primary-sidebar .widget {
float: left;
}
}
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.
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;
}