Below is a CSS class used to render a div with some links on one of the pages. I want to hide the div in mobile view(Mobile and tablets) and display only in desktop browsers. I am using SCSS.
What changes should I make to the CSS class?
.ps-widget__content {
#extend %list-reset;
ul {
border: 1px solid #d1d1d1;
li {
border-bottom: 1px solid #d1d1d1;
a {
display: block;
padding: 15px 20px;
line-height: 20px;
font-size: 16px;
font-weight: 500;
color: $color-heading;
text-transform: capitalize;
i {
margin-right: 10px;
}
&:hover {
background-color: $color-1st;
color: #fff;
}
}
&:last-child {
border-bottom: none;
}
&.active {
background-color: $color-1st;
a {
color: #fff;
}
}
}
}
}
You need to use media queries that that compiled by SCSS into following CSS out put or similar.
/* for desktop start */
div {
background-color: green;
}
/* for desktop end */
/* for tablet start */
#media screen and (max-width: 992px) {
div {
background-color: blue;
}
}
/* for tablet end */
/* for mobil start */
#media screen and (max-width: 600px) {
div {
background-color: yellow;
}
}
/* for mobile end */
<div>css automaticaly adjusts rules as view changes</div>
Related
Inside a Vue single file component I have a scoped style section that looks like this:
<style scoped>
#media screen and (max-width: 767px) {
#suggestions, #form, #mapcontainer, #searchcontainer {
width: 100%; padding: 6px;
}
#mapcontainer div#mapx {
height: 400px
}
}
#media screen and (min-width: 768px) {
#workarea {
display: grid;
grid-template-columns: 1.5fr 1fr;
}
#mapcontainer {
grid-column: 1;
}
.blurb {
grid-column: 2;
margin-left: 12px;
}
#mapcontainer div#mapx {
height:600px;
width: 100%;
}
}
#suggestions tr { border-bottom: thin solid silver; }
#suggestions td { padding: 6px 3px 6px 3px }
#suggestions table { margin-bottom: 12px }
</style>
After checking the rendered source in Chrome's inspector I see the data tag in the rendered component like this:
<div data-s-0="" id="appspace">
but I don't see any of the expected changes to the CSS as documented in the section about scoped CSS in the vue.js docs
It seems to happen every time the scoped style contains a #media query.
What do I need to change so that styles stay scoped?
I have created a button on my website menu and want to give it its own individual active link color, how would I go about doing this? In an ideal world, the button would be pink (#ed6d8d) and the active text color would be white. At current the default active menu item color is blue (#00bcd1) so would clash horribly with the pink - any advice would be much appreciated!
I used the following CSS code to create the button:
#in-crisis li a:hover {opacity: 1!important;
color: #ffffff;}
.in-crisis a {
border: 2px solid #dbf7ff!important;
padding: 12px!important;
margin: 10px 12px 12px 12px;
border-radius: 12px;
text-align: center;
background-color: #dbf7ff;
}
.in-crisis a:hover {
background-color: #fff;
color: #00bcd1!important;
border: 2px solid #00bcd1 !important;
}
.et_header_style_left #et-top-navigation {
padding-top: 16px!important;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 6px!important;
}
#main-header.et-fixed-header .in-crisis a {
color: #00bcd1 !important;
}
#media only screen and (max-width: 980px) {
.in-crisis a {
background-color: #dbf7ff;
}
}
#media only screen and (min-width: 980px) {
#et_top_search {
margin-top: 25px !important; }
}
Many thanks in advance.
I dont know if you are talking about hover or active but for active css you should use
.in-crisis a:active {
color: white;
//or anything else here
}
I'm not really good with css, somehow I managed to modify my navbar to make the collapsible button appear no matter how small or big the screen size is by adding this on my Site.css:
#media (max-width: 4000px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
.navbar-form {
width: 100%;
}
}
Now my navbar behaves the way I want it to except for 1 thing:
When I click the collapsible button, the drop down menu background takes all the space of the screen. What I want is when user is on desktop, the collapsible menu takes a specific width only. What should I change in my css file? This is my desired output (when using desktop ONLY):
I want all CSS changes to have a transition. I tried
* { transition: all 1s; }
but it's not working.
Proof: http://jsfiddle.net/Lv3kpyxh/
What am I missing?
Your media query rules are ill-formed. Try this instead:
* {
transition: all 1s;
}
#media only screen and (min-width: 600px) {
.special {
padding: 30px;
border: 1px solid black;
text-align: center;
}
}
#media only screen and (max-width: 600px) {
.special {
padding: 0;
border: 0;
text-align: left;
}
}
The padding value is animated, but if you want the border to animate too, you would be better off changing the second border rule to border: 1px solid transparent;.
Updated fiddle here
I have a desktop site and I've created a css file for the mobile site. It looks good on most mobiles but on an android tablet browser the menu links background color is not showing. How would I debug this? Is there a way I can code css to make changes just for android browsers?
I'm not sure where to start with this.
Thanks
To further explain the question:
I have a mobile css file that works well for iphone and android. Just one part of the site eg http://thepetwiki.com/q2a/ works for iphones but on android tablet the menu dropdown is not working. How do I change the code so works for android tablets as well?
.navigation {
max-width: none;
background: #21a9e9;
padding: 0;
list-style: none;
}
.navigation li {
float: left;
}
.navigation li a {
display: block;
color: #fff;
padding: 10px;
}
.navigation li a:hover {
background: #0fcaf2;
text-decoration:none;
}
.navheader {
font-size: 30px;
padding-top: 0;
/*font-family: helvetica;*/
}
.slide-trigger {
display: none;
border: 1px solid #CCCCCC;
cursor: pointer;
color: #FFFFFF;
}
.slide-trigger span {
background-image: url("skins/mobile/dropdown-arrows.png");
background-position: 0 -14px;
display: block;
float: right;
margin-top: 3px;
height: 14px;
width: 32px;
}
#media only screen and (max-width: 1000px) {
.slide-trigger { display: block; }
.no-js .slide-trigger { display: none; }
.navigation { display: none; }
.no-js .navigation { display: block; }
.navigation { margin: 0 15px; }
.navigation li { float: none; }
.navigation li a { border-bottom: 1px solid #fff; }
}
</style>
<script>
/* MOBILE COLLAPSE MENU */
(function($) {
$.fn.collapsable = function() {
// iterate and reformat each matched element
return this.each(function() {
// cache this:
var obj = $(this);
var tree = obj.next('.navigation');
obj.click(function(){
if( obj.is(':visible') ){tree.toggle();}
});
$(window).resize(function(){
if ( $(window).width() <= 1000 ){tree.attr('style','');};
});
});
};
})(jQuery);
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.slide-trigger').collapsable();
});
</script>`
here you go
#media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
#media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets # 600 or # 640 wide. */ }
#media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
#media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
#media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
#media (min-width:1281px) { /* hi-res laptops and desktops */ }
You can read more about Media queries and responsive design techniques here