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!
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'm pretty new to Wordpress modding.
At the moment, I'm using the Shift Nav plugin and I've set it to appear when viewport < 767px. This means that the original logo is there regardless of viewport size.
From the CSS I know that the class for logo is set for media all. I would like:
media (max-width: 767px) { display:none; }
But I don't know how to override the existing css code. I've tried adding the above CSS to the CSS editor and obviously nothing happens.
I don't understand what appears to be inline css, see here:
The site is here:
www.thegraduated.co.uk/store
Thanks in advance
You have a style attribute of display:inline-block in your html tag. You can use !important to overwrite that.
.site-logo-anchor a img { display: none !important; }
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;
}
}
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.