I have six items in a 100%-width carousel. When the screen is in portrait orientation, I'd like only 3 items to appear, so i dropped 3 using a media query (here is the jfiddle with the complete script):
#media all and (orientation:portrait) {
.wrapper4 .carousel1{
display: none;
}
.wrapper4 .carousel3{
display: none;
}
.wrapper4 .carousel6{
display: none;
}
}
The 3 items disappear, but the space they occupy is still retained. And when I try to get the remaining items to fill out the space that was previously occupied, it doesn't work.
.wrapper4 .carousel {
flex: 1; min-width: 33.3333%;
}
ie. above doesn't help spread out the remaining items. The 3 remaining items in the carousel retain their size and there's blank space occupied by the previous items when the screen is contracted to mimic portrait mode. How can I get the space to be freed up and the remaining items to fill up this space?
Tested on Chrome in Samsung Note, this works as intended:
All carousel items disappear in portrait mode:
#media all and ( orientation: portrait ) {
.carousel1 { display: none; }
.carousel2 { display: none; }
.carousel3 { display: none; }
.carousel4 { display: none; }
.carousel5 { display: none; }
.carousel6 { display: none; }
}
https://jsfiddle.net/0oug0t3r/11/ (can also be tested on desktop by re-sizing window)
All carousel items disappear in landscape mode:
#media all and ( orientation: landscape ) {
.carousel1 { display: none; }
.carousel2 { display: none; }
.carousel3 { display: none; }
.carousel4 { display: none; }
.carousel5 { display: none; }
.carousel6 { display: none; }
}
https://jsfiddle.net/0oug0t3r/12/
Removing the three carousel items as described in the question:
#media all and ( orientation: portrait ) {
.carousel1 { display: none; }
.carousel3 { display: none; }
.carousel6 { display: none; }
}
https://jsfiddle.net/0oug0t3r/13/
The only adjustments made were to match the alt tags in the img element with the corresponding carousel ID number, and I simplified the selector.
Related
I have a page that hides a div when the screen is small, showing another div with a clickable + to expand the hidden div.
#media screen and (max-width: 1230px) {
#details_Title {
display: none;
}
#details_Details {
display: inline; // THIS DOES NOT WORK AFTER JQUERY SLIDEUP
}
}
#media screen and (max-width: 990px) {
#details_Title {
display: inline;
}
#details_Details {
display: none;
}
}
The HTML
<div id="details_Title" onclick="showDetails()">
<b>Details</b>
<img id="imgPlusMinus" src="images/plus.png"/>
</div>
<div id="details_Details">
.... the details
</div>
JS
function showDetails() {
var img=document.getElementById('imgPlusMinus').src;
if (img.indexOf('plus.png')!=-1) {
document.getElementById('imgPlusMinus').src ='images/minus.png';
$("#details_Details").slideDown();
}
else {
document.getElementById('imgPlusMinus').src='images/plus.png';
$("#details_Details").slideUp();
}
}
Make the screen small, the divs show and hide correctly, click the + and the div details_Details expands as expected.
The problem is that if you close it and jQuery slides up the div details_Details, display: none is applied at the element level and the display: inline from the media query does not get applied. How do I get around this? Can I remove/overwrite the element level style from the media query?
$('#click').on('click', function() {
$('#toggle').toggle();
});
#media(min-width:767px){
#toggle{
display: block!important;
}
}
#click{
display: none;
}
#media(max-width:767px){
#click{
display: block;
}
#toggle {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="click">click</div>
<div id="toggle">always show above 767px</div>
Add a declaration for min-width so it will show no matter what.
#media screen and (min-width: 1230px) {
#details_Details {
display: inline!important; // THIS WILL WORK AFTER JQUERY SLIDEUP
}
}
#media (max-width: 992px) {
.menu__list {
display: none;
}
.btn__menu {
display: block;
}
}
.btn__menu div {
height: 5px;
background-color: #000;
margin-bottom: 5px;
}
.btn__menu {
width: 40px;
display: none;
}
The code above writes me that I have an error in display: block;. I need the burger menu to pop up when the screen is less than 992px wide but I have nothing. Where did I go wrong?
Swap the order - your general rules will overwrite the media query rules the way it's now, since they follow * after* them. So just move the media queries to the end.
I have a mat-dialog in Angular 8 app and I have set it to full screen. But after printing, I received a weired border.
Here is the image of the issue
To call the mat-dialog, I have used,
this.dialog.open(MaterialDetailsComponent, {
data: row, minWidth: '100vw'})
And my styles.css is,
#media print {
app-footer {
display: none;
}
app-labour-value-estimate-print-layout {
display: block;
}
.material-details-container-div {
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
border: none;
box-shadow: none;
text-shadow: none;
}
}
I have found what was the problem. It was the background graphics that were still interfering. So all I did is increased the width of the dialog from 100vw to 100.5vw and it solved the issue.
this.dialog.open(MaterialDetailsComponent, {
data: row, minWidth: '100.5vw'})
I have added a responsive menu to a blog developed on CodeIgnitor. FYI, someone else made this blog.
Everything is working fine but the menu is not expanding in mobile device while clicking on the icon to expand the menu.
function myMenuFunction() {
var x = document.getElementById("nav");
if (x.className === "navMenuCustom") {
x.className += " responsive";
} else {
x.className = "navMenuCustom";
}
}
.navMenuCustom {
background-color: #333;
overflow: hidden;
font-weight: 900;
}
.navMenuCustom a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
padding: 8px 16px;
}
.navMenuCustom a:hover {
background-color: #ddd;
color: black;
}
.navMenuCustom a:active {
background-color: #4CAF50;
color: white;
}
.navMenuCustom .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navMenuCustom a:not(:first-child) {
display: none;
}
.navMenuCustom a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.navMenuCustom.responsive {
position: relative;
}
.navMenuCustom.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.navMenuCustom.responsive a {
float: none;
display: block;
text-align: left;
}
}
<div id="nav" class="navMenuCustom">
Learn Guitar Fast
Teach Yourself Guitar
How to Buy a Guitar
String Ninja
Easy Guitar Songs
Contact
Blog
<a href="javascript:void(0);" class="icon" onclick="myMenuFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
I have used w3schools tutorial to add responsive menu. Link to w3schools tutorial.
You can also check the live website here.
The reason your menu does not work is because you have "overflow: hidden".
Overflow hidden causes the other element's to not show up, this because they will appear underneath the parent div.
When your page is on mobile size you have to remove the "overflow: hidden" so that the other menu items can show up.
#media only screen and (max-width: 600px){
.navMenuCustom {
overflow: auto;
}
}
I would also give the a attributes a background-color.
.navMenuCustom a {
background-color: #444;
}
The only problem that is left is that your image has an higher z-index than your menu items, so it will appear above it.
You can fix this problem with the following code:
Add higher index on the element you want to appear on top.
#nav {
z-index: 10
}
#slideshow-main-homepage div img {
z-index: 9;
}
It works, but .navMenuCustom has overflow: hidden, so you do not see it.
Quick fix would be to add overflow: visible to the .navMenuCustom.responsive. But you will still see nothing, because the items have transparent background and light font color. You must set background-color to the .navMenuCustom.responsive a as well. Last problem will be that the header image will appear over the navigation. You can fix that by removing all the position: relative attributes of its elements (I counted three of them: #banner-home, #slideshow-main-homepage and <div style="...">), but I am not sure if it cannot broke anything else. You must test it a little bit.
It's because you declared height with !important in your #nav, I recommed removing it or use the code below.
#media screen and (max-width: 600px) {
#nav {
height: auto !important;
}
}
Instead of just having text for example
If I do
1-800-123-4567 then it will be broken on desktops.
If I do (800) 123-4567 then it will display as the number on desktop but should automatically become a link on Android and iPhone
But if I want to make an image like this:
Is there a solution, possibly with media query or any other way. That I can make this image display on desktop and mobile but on mobile function as a button? This is for email so only HTML/CSS options.
Based on the answers I have this and it didn't work either:
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-image { display: block; } /* show it on small screens */
#my-link { display: none; } /* hide it on small screens */
}
#media screen and (min-width: 401px) and (max-width: 1024px) {
#my-image { display: none; } /* hide for all below 401px*/
#my-link { display: block; } /* show for all above 401px*/
}
Along with:
<div id="my-image">
Call Now!
</div>
<div id="my-link">
Call 1-800-328-4766
</div>
And it still is not working, both links are showing up.
Deleted my old answer, because it was poor. Please try this http://jsfiddle.net/qDUqS/
The telephone number looks the same both in small screen and in big screen, but it acts like a link, only on smaller screen.
Html:
<span class="phone"><img src="http://goo.gl/PdeeU" />1-800-123-4567<p>1-800-123-4567</p></span>
CSS:
.phone
{
background-color: #152C48;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 4px;
}
a
{
display: inline-block;
text-decoration: none;
color: #ffffff;
padding: 0px;
}
img
{
vertical-align: middle;
width: 24px;
height: 24px;
padding: 0px;
}
p
{
display: none;
color: #ffffff;
padding: 0px;
}
#media only screen and (min-width: 480px) and (max-width: 1920px)
{
a
{
display: none;
}
p
{
display: inline-block;
}
}
Hey I don't know if this is what you are asking for but it might help.
Do let me know.
http://www.wpbeginner.com/wp-tutorials/how-to-add-clickable-phone-numbers-for-smartphones-in-wordpress/
Sorry if this is not what you were looking for.
NOTE: Updated my code and all works as it should be now. set the max-width to 9999px.
Working JSFIDDLE
Make a div and put the image inside that div:
<div id="my-image"></div>
The css would look like this:
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-image { display: block; } /* show it on small screens */
}
#media screen and (min-width: 401px) and (max-width: 9999px) {
#my-image { display: none; } /* hide for all below 401px*/
}
for your button/link you can do the same but then otherwise:
<div id="my-link"></div>
The css would look like this:
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-link { display: none; } /* hide it on small screens */
}
#media screen and (min-width: 401px) and (max-width: 9999px) {
#my-link { display: block; } /* show for all above 401px*/
}
Hope it helps.
The answer is very simple, just ad opacity "transparrency" to the desktop code.and copy the code to mobile while setting the opacity to 1.