For some reason #media query is not working in my custom element....in this case the iron-icon. Only the the last setting takes effect, no matter what size the screen is. If I switched the order than the other last one would take effect. Any suggestions on how to fix this?
<dom-module id="portfolio-page">
<style>
:host[show] {
#apply(--layout-horizontal);
#apply(--layout-center-justified);
height: 600px;
}
#media all and (max-width: 500px) {
iron-icon {
--iron-icon-height: 108px;
--iron-icon-width: 105px;
margin-top: -21px;
}
}
#media all and (min-width: 600px) {
iron-icon {
--iron-icon-height: 250px;
--iron-icon-width: 250px;
}
}
<div class="layout horizontal center-center">
<iron-icon icon="build"></iron-icon>
<iron-icon icon="cloud-circle"></iron-icon>
<iron-icon icon="http"></iron-icon>
</div>
You're running into a limitation of the style shimmer. It sucks but there is a workaround detailed in this GitHub issue: https://github.com/Polymer/polymer/issues/2149
I also talk about it a bit in this video: https://www.youtube.com/watch?v=_VqeFubvNKw&list=PLNYkxOF6rcIDdS7HWIC_BYRunV6MHs5xo&index=4
Related
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 am building one of those contact forms that are conversational. Like:
The problem is that the placeholder text on one of them is very large and would either break into two lines or if I gave it a fixed width, it would break the layout of smaller mobile phones. Yes, I understand the the very simple solution would be to propose a change to the copy for any instance, but going on the fact that it cannot be done, how would I solve swapping the text based on the device width.
My proposed solution was to reduce the text on mobile. Since there they are more flexible with the mobile product, I can make these changes, but the desktop needs to comply with the PSD.
Demo
Demo on CodePen
HTML
<input type="text" id="org" name="" placeholder="ORGANIZATION OR COMPANY NAME">
CSS
#org{
display: block;
width: 96%;
margin: 0 auto;
}
#media only screen and (min-width: 768px) {
#org{
display: inline-block;
width: 360px;
}
}
It needs to be at least 360px to match the PSD for desktop.
One other option that I have is if I have entirely different inputs, would that work? like
<input type="text" id="org" class="orgm" name="" placeholder="ORG/COMPANY">
<input type="text" id="org" class="orgd" name="" placeholder="ORGANIZATION OR COMPANY NAME">
.orgm { //mobile
display: block;
}
.orgd {
display: none;
}
#media only screen and (min-width: 768px) {
.orgm{
display: none;
width: 96%;
margin: 0 auto;
}
.orgd {
display: inline-block;
width: 360px;
margin: 0;
}
}
I don't want to use jQuery or other javascript based solutions.
If you absolutely must keep that copy and are willing to do something a bit hacky, this is where it becomes annoying, but you could try...
<div class="input--container">
<p class="input--placeholder">
<span class="desktop">ORGANIZATION OR </span>
COMPANY NAME
</p>
<input type="text" id="org" class="input" name="">
</div>
// Hide the long part on mobile
.input--placeholder span { //mobile
display: none;
}
#media only screen and (min-width: 768px) {
// Show the full on desktop
.input--placeholder span {
display: inline;
}
}
And then you'll just have to position the placeholder text absolutely over the top of the input.
EDIT: You'll also have to hide the placeholder completely when the user is on the input which you can do with input:focus selector
hello I have made a pop up effect in css it is a div that contains two floating divs the first one width is 34.8% of the main pop up and the second one is 65%
now I want to change the design of the whole pop up once the screen get smaller so I used a media query to change the width and rearrange the elements ;however it won't change I think its because of the float thing here is the code please help
<div class="overlay"></div>
<div class="popup">
<div id="itemphoto">
<img src="../images/stuff%20for%20sale/1.jpg" alt="none">
<p id="itemtitle">IPhone 6s</p>
</div>
<div id="itemdesc">
<p><span>Seller :</span> 116825349</p>
<p><span>Seller Rate :</span> Trusted</p>
<p><span>Lower Bid : </span>250</p>
<p><span>Bidders :</span> 30</p>
<p><span>Higher Bid : </span>366</p>
<p><span>Brief Description :</span> SAN FRANCISCO — September 9, 2015 — Apple® today announced iPhone® 6s and iPhone 6s Plus, the most advanced iPhones ever, adding a powerful new dimension to iPhone’s revolutionary Multi-Touch™ interface. The new iPhones introduce 3D Touch, which senses force to enable intuitive new ways to access features and interact with content. iPhone 6s and iPhone 6s Plus feature Retina® HD displays made from the strongest glass on any smartphone and 7000 series aluminum, the same alloy used in the aerospace industry, in gorgeous metallic finishes that now include rose gold.</p>
</div>
<button id="bid">BID</button>
<button id="notify">NOTIFY ME</button>
<button id="close">CLOSE</button>
</div>
.popup
{
width: 70%;
height: 550px;
background: #292929;
z-index: 1001;
position: fixed;
top :10%;
left: 15%;
border-radius: 15px;
/* display: none; */
}
.popup #itemphoto
{
width: 34.8%;
margin-right: 0.2%;
height: 450px;
float: left;
border-top-left-radius: 15px;
overflow: hidden;
background: #EFF1F2;
}
.popup #itemdesc
{
width: 65%;
height: 450px;
float: left;
border-top-right-radius: 15px;
padding: 20px;
overflow-y: scroll;
background: #EFF1F2;
}
/*media queries*/
#media screen and (max-width:1000px)
{
.popup
{
width:80%;
left: 10%;
}
#itemphoto
{
float: none;
width: 100%;
}
}
change your media query to:
.popup #itemphoto {
float: none;
width: 100%;
}
As it's more specific than #itemphoto, it's keeping the properties of the main css, changing it to this will make it apply correctly.
https://jsfiddle.net/h5wbjcsq/
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/
How do I make the input elements have the same size and alignment as my div elements? (facebookLoginButton and standardLoginButton)
HTML code:
<header>
<div id="topPane">
<h1 id="georgeLogo">G.</h1>
<div id="login">
<div id="facebookLoginButton">Continue with Facebook</div>
<br class="lb">
<div class="center">or</div>
<br class="lb">
<form id="loginForm">
<input type="text" placeholder="Email Address" required>
<br>
<input type="text" placeholder="Password" required>
</form>
<div id="standardLoginButton">Login</div>
</div>
</header>
<div id="bottomPane"></div>
Jsfiddle http://jsfiddle.net/0013v9yj/
In css, apply the same styles to the input... and add display: block to the input
Changed the last css block into this (just added input size on media queries, you only added it in the last of them)
/*********************
MEDIA QUERIES
*********************/
#media only screen and (min-width: 0px) and (max-width: 480px) {
#georgeLogo {
font-size: 6em;
}
#facebookLoginButton, #standardLoginButton, #loginForm input {
font-size: 1.5em;
width: 12.5em;
}
}
#media only screen and (min-width: 481px) and (max-width: 768px) {
#georgeLogo {
font-size: 7em;
}
#facebookLoginButton, #standardLoginButton, #loginForm input {
font-size: 1.5em;
width: 15em;
}
}
#media only screen and (min-width: 769px) {
#georgeLogo {
font-size: 8em;
}
#facebookLoginButton, #standardLoginButton, #loginForm input {
font-size: 2em;
width: 15em;
}
#loginForm {
width: 15em;
}
}
So your issue is that you're using em instead of rem or pixels.
em is relative to its parent, so this can get kind of confusing with the math. If you have an li which is sized at 1.2em and nest another li inside it, it effectively gets a font-size of 1.2 × 1.2 = 1.44em.
rem is not relative to its parent, but to the root of the documnet (default of 16px). However, keep in mind rem is not supported by IE < 9.
In your code, 15 em is a different width for your form and your facebookLoginButton because you keep changing that parent's font-size/em.