I read somewhere that it can be done with Elementor (reference), but can it be done any other way?
Now it's set on 600px, but I want it triggered at 1200px. Is this possible?
Yes, you can use the CSS code to hide and show the menu on a specific device size.
You can use the following CSS code.
#media(max-width:1200px)
{
.YourDesktopMenu{
display:none !important;
}
.YourMobileMenu{
display:block !important;
}
}
This CSS code helps to hide the desktop menu and show the mobile menu for the lower screen then 1200px.
Related
My shop page back-end is using WooCommerce + elementor.
The cart page is boxed to avoid a messy layout look on larger screens:
the top section is stretched to full width:
Issue:
The woo notice that appears when you update your cart quantity or remove an item from the cart appears as a boxed view (as it coincides with the width of the "cart" section - which is set to boxed- 1200px)
How can I have "just the woo notice set to full width (no matter the screen size) without needing to make my whole shop page full width?
*I tried to set the wrapper to (width: 100vw), but no luck
video sample: https://streamable.com/euksnx
Thank you for your help.
after looking into your website, I noticed where the issue lays. The .woocommerce-message has a width of 100vw. This is why it sticks out of the parent. If you simply remove this, it will show as expected.
If this is styling you didn't apply and can't remove, overwrite it in your child theme with the following class
.woocommerce-notices-wrapper .woocommerce-message {
width: 100%;
}
As this is WordPress and sometimes your CSS doesn't want to overwrite, you can always resort to using !important for width. However, I think it's better if you try to see if it will work without it.
Image with 100VW what it is now:
Image with 100% class
To stretch the banner full width as requested in the comments, add the following CSS:
.woocommerce-notices-wrapper .woocommerce-message {
margin-left: calc(50% - 50vw);
width: 100vw;
}
My logo has a normal size on the screen like this
and if I change the screen-size of the browser then my logo gets very small.
The logo mustn't have a small size like in the previous pictures. It should be more like in the next picture:
I know there a lots of different themes but is it possible to keep the logo big by smallering the screen?
Most WP themes have pre-set media queries that provide breakpoints to make the site responsive to screen size changes.
You can override these with custom CSS, but I'd find the breakpoint first. Use this tool and then add something like the following to your CSS:
#media screen and (max-width: 400px){
.logo{
width:200px !important;
}
}
This changes the width of the logo when the screen size is 400px or smaller. Change 400px to whatever value the breakpoint is set at. You can edit width or height this way, but there's no need to do both unless you want to.
Edit: ".logo" in the CSS above should be changed to whatever the logo's class is.
I am assuming you are using a theme and did not build this from scratch. Chances are your theme has a responsive image declaration, such as:
.someAwesomeDivName img {
width:100%;
height:auto;
}
and the parent div holding that image is a certain width, which effects the image inside it. Check there first, and go from there.
I'm trying to change the height of the Twitter feed module you can see here. The layout was done by the vendor we're using for our WCMS, so the CSS is proving a little difficult to navigate. I resized the iFrame for the feed so that it spans two rows, but now when it resizes for phones and tablets it overlaps the "Spotlight" article below it. Here's the CSS. Any help is much appreciated!
Instead of clearing your floats with an extra div using clear:both it's best to get in the practice of clearing your floats in the parent container using overflow:hidden
The interim fix for the problem your having with your twitter iFrame overlapping your "spotlight" article is due to line 3568 in app.css where the max-height is specified. Removing that should fix the issue.
.home-content-modules-row .content-module {
/*max-height: 320px;*/
}
Or maybe doing a media query to specify max-height:auto for that element when in tablet or mobile form.
#media only screen and (min-width: 64.063em) {
.home-content-modules-row .content-module {
/*max-height: 320px;*/
}
}
The reason you are facing this issue is because the article tag which wraps the iframe has a CSS property max-height:320px attached to it. Due to this, when you view in the mobile view, the article tag does not expand beyond 320px. As the width is also being decreased in the mobile view, the 320px height limitation causes the content to overlap rather than flow below it.
What you can do is override the 320px max height limit with something like this in your media query :
.home-content-modules-row .content-module {
max-height: 1000px;
}
Hope this helps!!!
I have made a menu bar but when i re-size the window the menus leave their position. I want them to auto adjust please suggest how i can achieve this.
here is my fiddle link:
[Fiddle][1]
[1]: http://jsfiddle.net/c9ssy2dj/
look at this fiddle i made for you:
http://jsfiddle.net/0w8t31k9/
however you have to edit it because i made it real fast from something i made.
mediaqueries look like
#media only screen and (max-width: 770px){
/* css you want to overwrite */
}
you can find the documentation and the script here: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
I am using the Pictorico theme on my site (http://linktick.com/). When you resize the window, for whatever reason, there is an additional block of blue to the right of the content that you can horizontally scroll to:
However, when you look at a WordPress demo of the theme (http://pictoricodemo.wordpress.com/) and you resize it, this additional blue block does not appear - no horizontal scrolling option is available at all:
How can I make my site behave like this as well?
#media screen and (max-width: 885px) {
.screen-reader-text { display: none; }
}