I need to remove the hamburger menu when a user is viewing the community site on a mobile device. I'm told I can do this via CSS, but I'm not sure how. Any ideas?
Doesn't seem like there are any declarative options out there. I found information pertaining to Mobile Publisher, but that doesn't apply.
Thanks!
#media screen and (max-width: 776px){
.hamburger-menu{
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;
}
}
First go at working with a (Dara) child theme here, not far off noob. All was working great and the website was signed off until the client updated Wordpress, and now the submenu items have stopped pulling through on mobile. I tried to use Reponsive Menu plugin as a temporary workaround, but the submenu items do not appear even then.
Had a couple of pals look at it and there appears to be way too much styling applied to .mainnavigation.
Any easy-to-understand help would be much appreciated on my quest to learn Wordpress development!!
Tried deactivating all plugins, doesn't seem to be a conflict. It's gotta be a CSS issue I just don't understand.
Link to site https://froufroudays.co.uk/
The sub-navigation appears when parent element is hovered, but the way of this is strange: css change "left" parameter from "99999em" to "1.4em", but only for media query "screen and (min-width: 768px)" - you can find it on the line 2125 of your style.css
So, your theme not expects the sub-navigation in mobile menu.
To resolve this issue you just need to add css rule on hover for media query smaller than 768px.
#media screen and (max-width: 768px) {
.main-navigation ul li:hover > ul {
left: 0;
top: 0;
position: relative;
}
}
But this way is not perfect. The best is to show sub-navigation on click on mobile devices using JavaScript.
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;
}
}
researching a couple of hours now, i want to find a clever solution for giving a user the opportunity to switch to the desktop version of the current mobile version of a website.
Technically that menas that i either have a dedicated mobile site or a single site with media queries making the design responsible.
For me the last option of a single website with responsive design is of great interest.
1.) What ways can you think of to manipulate design by the user?
2.) Should it be on the server side or client side? Pros/cons?
3.) What kind of experience do you have with possible solutions?
I'm aware that there are some questions already out there...
https://stackoverflow.com/questions/11146768/switching-between-mobile-and-desktop-site
Switch From Mobile Version to Full Website (Desktop Version)
Thanks a lot!
Easiest CSS fix would be:
Eg:
#wrap {
width: 1020px;
}
#media only screen and (max-width: 900px) { /* Screen which has a maximum width of 900px */
#wrap {
width: 500px;
}
}