I want to use the :hover effect on desktop (which is working pretty fine) and switch to :active for mobile devices.
.dropdown:hover,
.dropdown:active .dropdown-content {
display: block;
right: 20px;
}
<div class="dropdown">
<div class="dropdown-content">
<p id="dropdown-element">Dashboard öffnen</p>
<p id="dropdown-element">Beratung beenden</p>
</div>
</div>
You can differentiate a CSS rule with the #media construct:
<style>
/* for all types */
.dropdown-content {
...
}
/* for desktop (also old ones) */
#media (min-width : 641px)
{
.dropdown:hover {
...
}
}
/* for smartphones */
#media (max-width : 640px)
{
.dropdown:active {
...
}
}
</style>
<div class="dropdown">
<div class="dropdown-content">
<p id="dropdown-element">Dashboard öffnen</p>
<p id="dropdown-element">Beratung beenden</p>
</div>
</div>
Adjust #media max-width and min-width as your needs.
Related
I'm trying to show a <span> when #media (min-width: 600px) and in other cases to hide that <span>
So i've created a class called elimina-text with display set to none then in media query i'm setting that class to display inline but the media query is overwritten and the text is not shown...
So my anchor where i have to hide the text looks like this
#media screen and (min-width: 600px) {
.elimina-text {
display: inline;
}
}
.elimina-text {
display: none;
}
<a _ngcontent-qmm-c108="" href="" apphref="" class="text-muted button-remove" ng-reflect-href=""><i _ngcontent-qmm-c108="" class="material-icons">delete</i><span _ngcontent-qmm-c108="" class="elimina-text">Elimina</span></a>
Change the order of the CSS.
.elimina-text {
display: none;
}
#media screen and (min-width: 600px) {
.elimina-text {
display: inline;
}
}
<a _ngcontent-qmm-c108="" href="" apphref="" class="text-muted button-remove" ng-reflect-href=""><i _ngcontent-qmm-c108="" class="material-icons">delete</i><span _ngcontent-qmm-c108="" class="elimina-text">Elimina</span></a>
I would like to have my site remove an image only on mobile which I was able to accomplish using
#media (max-width: 480px) {
.slide-6996 {
display:block !important;
}
.slide-6996 {
display:none !important;
}
}
However, I also would still like to display the text that was on the slide that I am now not showing. I have tried this in CSS, but it obviously didn't work.
#media (max-width: 480px) {
.slide-6996 {
display:block !important;
}
.slide-6996 {
display:none !important;
#slide-content {
display: block !important;
}
}
}
My HTML for this specific instance is
<div id="slide-6996" class="slide slide-6996 cycle-slide-active slide-left light" style="background-image:url(http://18.205.33.160/wp-content/uploads/2019/02/ITData-Home-Page2018-01-edited.jpg);">
<div class="slide-body">
<div class="container">
<div class="slide-caption">
<div class="slide-content">
<h1><strong>COMPREHENSIVE IT SERVICES YOU CAN TRUST</strong></h1>
</div>
<h2 class="slide-title"> Let us help you develop an IT Optimization Strategy and Define your technological priorities </h2>
<a class="slide-link button button-medium" href="http://18.205.33.160/index.php/itone-method/?customize_changeset_uuid=56ed31cf-ab75-46c7-bf6a-d1eb013fed32&customize_messenger_channel=preview-0&customize_autosaved=on" target="_self"> Learn how we can help you succeed </a>
</div>
<div class="slide-image"></div>
</div>
</div>
</div>
It should also be worth noting that I am on WordPress and am open-minded to any suggested plugins that may fix my issue.
You can't override inline CSS using external CSS, but what you can do is edit your HTML a bit. By adding a new class in that div and in the external CSS you can make rules for what and when to apply.
So, in first line add a new class "background-cls"—your first line needs to be like this:
<div id="slide-6996" class="slide slide-6996 cycle-slide-active slide-left light background-cls">
Then in your external CSS add something like this:
#media (max-width: 480px) {
.background-cls {
background-image: none !important;
}
}
.background-cls {
background-image: url(http://18.205.33.160/wp-content/uploads/2019/02/ITData-Home-Page2018-01-edited.jpg);
}
Here's a fiddle: https://jsfiddle.net/2xb34dev/
With your markup this should work:
#media only screen and (max-width: 480px) {
.slide-6996 .slide-image {
display: none !important;
}
}
Hope that solves it.
You can use #media and then hide that class.
#media (max-width: 576px){
.yourclass{
display:none;
}
}
You can choose 767px or 992px for larger size or you can give your #media with between sizee like following example:
#media screen and (max-width: 576px) and (min-width: 767px) {
.yourclass {
display: none;
}
}
I have a staff section on a Wordpress site I'm building with hover effects across each staff member image showing their name, job title and bio.
The staff bio's are quite long and the client is reluctant to change them, however, when looking at the effects on tablet/mobile screen sizes the bios don't fit the smaller image.
I've tried changing the font-size but if I reduce it any further the text will be unreadable.
Rather than change the bio size what I want to do in the media queries is block out the bio's and just leave the name & title using display:none; for the bio <p> tags but I can't get it to work.
Is this the best way to do it?
This is the code for one of the images -
html/php
<div class="staff">
<div class="masonry">
<div class="brick">
<?php if( get_field('whoweare_image1') ): ?>
<img src="<?php the_field('whoweare_image1'); ?>" />
<?php endif; ?>
<div class="details">
<span id="info">
<h3><?php the_field('whoweare_name1'); ?></h3>
<p class="bio"><?php the_field('whoweare_text1'); ?></p>
</span>
</div>
</div>
<!-- identical code for other staff member images -->
</div>
</div>
And this is what I've tried for the media queries (for ipad/tablet portrait) -
style.css
#media only screen and (min-width: 750px) and (max-width: 960px) {
.staff .brick .details #info .bio p {
display: none;
}
}
I added the bio class to the <p> tags after I tried this CSS rule below and it blocked out the whole text including name/title -
#media only screen and (min-width: 750px) and (max-width: 960px) {
.staff .brick .details #info p {
display: none;
}
}
Any assistance would be appreciated.
The selector has to be
.staff .brick .details #info p.bio { ... }
("bio" is the class applied to the p tag)
your target wrong
#media only screen and (min-width: 750px) and (max-width: 960px) {
.staff .brick .details #info p.bio {
display: none;
}
}
https://jsfiddle.net/pcto2Lkj/1/
You can do like below css styles.
#media only screen and (min-width: 750px) and (max-width: 960px) {
.staff .details #info .bio {
display: none;
}
}
Having inspected the elements a little closer I discovered that Wordpress have done that strange thing and added a class to the <p> tag - <p class="p2">so I targeted this attribute and it worked -
.staff .brick .details #info p.p2 {
display: none ;
}
I don't fully understand why these attributes are created, however, this has cleared up why the <p> tag wouldn't work.
I have a button on my website but i want it to be only available on mobile.
How can i hide it from my desktop site?
<div class="pull-right">
<button class="button-menu-mobile open-left">
<i class="ion-navicon"></i>
</button>
<span class="clearfix"></span>
</div>
And here is the css
.button-menu-mobile {
background: transparent;
border: none;
color: #ffffff;
font-size: 21px;
line-height: 60px;
padding: 0px 15px;
Thanks :)
I am attaching a working code snippet, here if you go full screen, you won't be able to see the button.
Working Example
#media(min-width: 900px)
{
.button-menu-mobile
{
display:none;
}
}
<div class="pull-right">
<button class="button-menu-mobile open-left">
<i class="ion-navicon"></i>
</button>
<span class="clearfix"></span>
</div>
You need to use media-queries for this purpose. set min-width according to your need.
#media(min-width: 900px)
{
.button-menu-mobile
{
display:none;
}
}
Code:
#media screen and (min-width: 600px) {
.pull-right {
visibility: hidden;
}
}
I am trying to change color of tag on screen resizing. My html page has
following lines
<meta name="viweport" content="width=device-width, inital-scale=1.0">
.
.
<div class="container">
<div id="bg">
<img src="/affeo/img/lll1.jpg" class="img-responsive"/>
</div>
</div>
<div class="container">
<div class="jumbotron text-left" id="jumboText">
<h1>Hello World 0</h1>
</div>
</div>
CSS file has following style:
#media all and (max-width: 1000px) {
#bg {
display:none;
}
#jumboText h1 {
color: black;
}
}
.
.
#jumboText {
position: absolute;
top: 20%;
left: 15%;
background-color:transparent;
}
#jumboText h1 {
position: absolute;
padding-left: 10px;
color: #FFFFFF;
opacity: 0;
white-space: nowrap;
}
Now when I am resizing the screen, image in id:bg is disappearing as expected, but color of jumboText is not changing to black.
Move your media query to the bottom of your code.
The way you have it now - the code inside your media query will be overridden by your regular code
Alternatively, you could increase the specificity of the classes within the media query by say adding the body tag in the selectors
#media all and (max-width: 1000px) {
body #bg {
display:none;
}
body #jumboText h1 {
color: black;
}
}
You need to declare the media queries styles after the non-media query styles - towards the bottom. Otherwise the media queries are overwritten.
There is also a opacity:0; declared on the h1 which needs to change in the media query.
http://jsfiddle.net/omupxnhm/6/