I'm building a photography website in Wordpress and on the home page, I want to set a different slider for mobile and desktop as the given requirement. So how can I do that?
You can create two WordPress sliders, one for mobile, one for desktop.
After you have created two sliders, you can add the following code to your post or page. Please be sure to change the ID value in the code to that of your own sliders.
<div id="largescreen">
[wonderplugin_slider id="1"]
</div>
<div id="smallscreen">
[wonderplugin_slider id="2"]
</div>
Then you can add the following CSS code to your WordPress theme style.css file to show the small slider when the screen width is less than 640px:
#largescreen {
display: block;
}
#smallscreen {
display: none;
}
#media (max-width: 640px) {
#largescreen {
display: none;
}
#smallscreen {
display: block;
}
}
Related
my website's main menu responsive breakpoint is at the 850px for mobile menu. Though I want to change it to a mobile menu from 1369px, as the desktop main menu after 1369px overflow the site content. I have tried CSS such as:
#media only screen and (max-width: 1369px) {
.header-nav.header-nav-main.nav.nav-left.nav-line-grow.nav-size-small.nav-spacing-medium.nav-uppercase {
display: none;
}
.mobile-nav.nav.nav-left {
display: block; !important:
}
}
Thus it only hides desktop menu but no hamburger menu appears...
Could somebody advise me how to change this breakpoint correctly? p.s. I am an amateur beginner in web development.
Thank you in advance.
you may add another breakpoint to your css file easily by adding #media :
#media only screen and (max-width: 1369px) {
.header-nav, .header-nav-main, .nav, .nav-left, .nav-line-grow, .nav-size-small, .nav-spacing-medium, .nav-uppercase {
display: none;
}
.mobile-nav, .nav.nav-left {
display: block; !important:
}
}
I want to make my storefront theme not hide the build in site search .woocommerce-product-search on mobile devices.
Add the following css
Method 1: https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/
#media screen and (max-width:768px) {
.site-search {
display: block !important;
}
}
I am using Node child theme for my site. The header and menu works fine in the desktop mode but when it is shrinked to responsive mood the heading with menu disappeares. I have tried allmost all the options but none is working. I couldn't find any documentation of the theme and any specific solution on the net. My site url is-
http://onlineinternetquest.com/
Add This code in your mobile media query
header.edgtf-mobile-header {
display: block !important;
}
header.edgtf-mobile-header .edgtf-mobile-header-inner {
height: auto;
}
You have media-query in your css that says under 1024px display: none; to head.
See screen shot from F12:
So remove this media-query:
media only screen and (max-width: 1024px)
.edgtf-page-header, .edgtf-top-bar {
display: none;
}
I have link that should link to phone number in mobile size like this tel:+989203022438 but in desktop link to my contact page. Is that possible?
Sure, what you need to do is have two elements.
First element (for mobile) and have the text inside of it the telephone number.
Second element (for desktop) with the link to your contact page.
Next, you'll use CSS media queries to set which you should show, something like this:
#phoneContact {
display: none;
}
#media only screen and (max-width: 500px) {
#phoneContact {
display: block;
}
#desktopContact {
display: none;
}
}
I've added slider in the big_title section using Nivo Slider plugin.
Slider is working fine but It's not responsive while the resolution decreases the slider remains the same size.
These are the codes I added :
Here is the Css added,
#media screen and (max-width:1023px) {
.home-header-slider {
padding-top: 111px;
}
}
#media screen and (max-width:767px) {
.home-header-slider {
padding-top: 0px;
}
}
#media screen and (min-width:1024px) {
.home-header-slider {
padding-top: 76px;
}
}
Code added in big_title.php template file
<div class="home-header-slider">
<?php nivo_slider( 1 ); ?>
</div>
I can't figure it out the error so please anyone tell me the correct code. Or is there any alternative to Nivo Slider do please tell me.
Go to the Nivo Slider --> Settings --> Slider Sizing
and select "Responsive"