WOO Canvas for mobile is pretty great, but let’s say there are just a few changes you’d like to make. Here’s some help.
Here’s the code you need (easiest is to put it into your Edit CSS file from Jetpack). It’s pretty much those first lines and the last brackets. Then your CSS (complete with regular brackets) goes inside of those brackets.
|
1
2
3
4
5
6
|
@media only screen and (max-width: 767px) {
/* Change content background to transparent when mobile view */
#yourdivexample .yourspanexample {
background: #fff !important;
}
}
|
For example, I want to hide the Business Slider on just mobile, I would put in this code:
|
1
2
3
4
5
6
|
@media only screen and (max-width: 767px) {
/* Change content background to transparent when mobile view */
#yourdivexample .yourspanexample {
background: #fff !important;
}
}
|
If you’re using more than just a single CSS class, just make sure they’re all in the same brackets. Careful to not put something before or after the brackets as it will … break things.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
@media only screen and (max-width: 767px) {
/* Change content background to transparent when mobile view */
#loopedSlider, #sidebar-alt, #header .search_main {
display: none !important;
}
.three-col-middle #wrapper #main {
width: 90% !important;
padding: 0 4%;
}
#logo {
margin-bottom: -20px;
}
#header-container {
background: #fff !important;
padding-bottom: -20px;
}}
|
[…] Simple CSS Edits for Mobile View (Jul 7) […]