I have written a media query for chrome which is not working properly in Firefox.
I'm trying for a 1366*768 screen resolution.
I have attached both a working screenshot of Chrome and not a working screenshot of Firefox.
HTML:
<div class="row m-row--no-padding m-row--col-separator-xl">
<div class="my-widget-gridster">
<!-- Widget Gridster-->
<gridster *ngIf="data.length>0" [options]="options">
<gridster-item [item]="item" [ngClass]="{ 'gridster-item-maximize': item.pod.podMaximized }" *ngFor="let item of data; let i= index;" (contextmenu)="onPodContextMenu($event, item); $event.preventDefault()" >
<e-pod [type]="type" [refreshCount]="count" [iPodModel]="item.pod" [index]="i" (widgetMinMaxEmit)="onPodMaximize($event, item, i)"></e-pod>
</gridster-item>
</gridster>
</div>
</div>
CSS:
#media screen and (min-width: 1366px) and (max-height: 768px) {
.gridster-item-maximize {
transform: translate3d(0px, 0px, 0px);
display: block;
z-index: 9999;
position: fixed;
width: 74.6% !important;
height: 78.8% !important;
top: 20.6%;
left: 24.9%;
bottom: 0;
overflow: auto;
}
}
Expected: media query written for Chrome should work for all the browsers.
Actual: working for chrome, not in Firefox.
Chrome:
Firefox:
Related
I'm working on this project: https://kickit.gr/ and I have an issue with the mobile menu of the homepage (only!), on safari browser.
When the hamburger button is clicked, the menu, even though it opens and is clickable, it is invisible!
The mobile menu is effective < 750px screen width.
I don't own an iphone and the debugging through sites with virtual safari browsers isn't that effective. I have tried changing some css, but with no luck...
You can check the problem on the live site.
Here is most of the relative code:
function hamburgerButtonClick() {
var hamburger = $('.hamburger');
var menu = $('.menu');
var is_active = 'is-active';
var mobile_menu = 'mobile_menu';
if (!hamburger.hasClass(is_active)) {
hamburger.addClass(is_active);
menu.addClass(mobile_menu);
} else {
hamburger.removeClass(is_active);
hamburger.removeClass(mobile_menu);
menu.removeClass(mobile_menu);
}
}
.sticky_menu .menu {
display: block;
text-align: center;
padding-top: 30px;
margin: 0 auto;
float: none;
}
.mobile_menu {
display: block !important;
width: 100%;
position: fixed;
top: 70px;
background: #191b1a;
padding-top: 10px;
color: #ffffff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="sticky_menu" id="sticky_menu">
<div class="menu_holder">
<div class="logo"></div>
<button class="hamburger hamburger--spin" type="button" onclick="hamburgerButtonClick()">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div class="menu">
<ul>
<li></li>
</ul>
<div class="social_menu_mobile"></div>
</div>
</div>
</nav>
the .is_active class is used for the animation of the icon of the hamburger-menu, i don't believe it is relevant to the problem.
Any help is appreciated!
apparently there are some issues with overflow: hidden in Safari iOS.
I removed the property targeting the node, in the header_frontpage.css. Now it works as intended.
Here is <div> with style:
<div style="transform: translateX(1565px) translateY(159px) translateZ(0px)">
</div>
I want to add class that can calculate existing value of translateX and subtract 140(for example) from it. Is it possible to do that?
Regards, Nick
Maybe you would consider using css variables? With them you can define just the offset value in a class, and use that value inside the main class that calculates the actual translation. In the example below you can see that i defined small utility classes just modify the offset value.
/* for visual purposes */
.box {
width: 50px;
height: 50px;
background-color: grey;
margin: 10px;
}
.box{
--offset: 0px;
transform: translateX(calc(15px + var(--offset))) translateY(2px) translateZ(0px);
}
.smallOffset{
--offset: 10px;
}
.bigOffset{
--offset: 40px;
}
.negativeOffset{
--offset: -20px;
}
<div class="box"></div>
<div class="box smallOffset"></div>
<div class="box bigOffset"></div>
<div class="box negativeOffset"></div>
Unfortunately, the support for css variables is not perfect, as IE is not supported at all. For more details about usage of --variable, var(--variable) and related, please refer to the docs.
Use calc()
.decrease{
transform: translateX(calc(1565px - 140px)) translateY(159px) translateZ(0px);
}
<div class="decrease">
div
</div>
With media-query:
.decrease{
transform: translateX(1565px) translateY(159px) translateZ(0px);
}
#media only screen and (max-width: 600px) {
.decrease {
transform: translateX(calc(1565px - 140px)) translateY(159px) translateZ(0px);
}
}
<div class="decrease">
div
</div>
Using Less and parameter:
#translateX : 1565px;
.decrease{
transform: translateX(#translateX) translateY(159px) translateZ(0px);
}
#media only screen and (max-width: 600px) {
.decrease {
transform: translateX(calc(#translateX - 140px)) translateY(159px) translateZ(0px);
}
}
I have a particle-slider effect for a logo on a site which transitions to a flat logo image file for screen sizes less than 960px. It works fine on Safari and chrome but on Firefox the image stretches out of shape.
Safari/Chrome
Firefox
Do I need to add some specific code for Firefox to make this work?
Here's how I have the code at the moment -
style.css
/* RWD for logo */
#media screen and (max-width: 960px) {
#particle-slider {
display: none;
}
}
#media screen and (min-width: 960px) {
#logo img {
display: none;
}
}
#media screen and (min-width: 320px) and (max-width: 960px) {
#logo {
height: auto;
}
#logo img {
width: 70%;
height: 30%;
position: relative;
top: 50px;
padding-bottom: 50px;
left: 15%;
}
}
/* ----------------------------------------- */
particle-slider.php
<?php /* Template Name: particle-slider */ ?>
<!-- particle-slider template -->
<div id="particle-slider">
<div class="slides">
<div class="slide" data-src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logohight.png"></div>
</div>
<canvas class="draw" style="width: 100%; height: 100%;"></canvas>
</div>
<script type="text/javascript">
var ps = new ParticleSlider({ 'width':'1400', 'height': '600' });
</script>
<div id="logo"> <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logo.png"> </div>
<!-- particle-slider template -->
This has only appeared as an issue after I loaded the front-end files onto a Wordpress CMS (I'm using a HTML5 Blank Child theme), they worked fine as a stand-alone front-end site. How do I fix this?
Try is removing the height: 30% style from the img. I am guessing you want the image to retain its aspect ratio so height: auto might work better?
.small_only {
display: block;
}
.large_only {
display: none;
}
/* === Media Queries === */
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) {
.small_only {
display: none;
}
.large_only {
display: block;
}
}
<div class="container">
<div class="row">
<div class="col-lg-12 col-xs-12">
<div class="small_only">
<h1>SMALL</h1>
</div>
<div class="large_only">
<h1>This should only be visible in large windows</h1>
</div>
</div>
</div>
</div>
Problem: The output contains only the word "SMALL" no matter how wide the screen is.
I feel like I'm missing something obvious, but for the life of me I can't figure out what it is.
Don't use // for comments in CSS..
Use /*..*/
http://www.codeply.com/go/uMSHCzymw3
.small_only {
display: block;
}
.large_only {
display: none;
}
/* === Media Queries === */
/* Extra large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) {
.small_only {
display: none;
}
.large_only {
display: block;
}
}
EDIT
Codeply's CSS compiler which uses ACE editor picked it up..
i have one div and on below of that div am showing one div with the iframe which loads the html page in same page dynamicaly..but what happens is the div with an iframe overlay the upper division as the iframe containg html haev long height..so can any one please tell me how i can put the div which contains iframe below the upper div tag regardless of which content loaded in the iframe.and also i want to make it look same in chrome as well as mozila..
following is my structure...
<div class="row-fluid">
<div class="span3" id="media_select">
<label
style="float: left; padding-top: 5px; padding-bottom: 10px; padding-right: 10px; padding-left: 22px"> Media
</label><select style="width:125px" name="mediatype" id="mediatype"
data-placeholder="- Select Ad Type -" class="chzn-select"
tabindex="4">
<option value="0">Select All</option>
<%
List<mediatype> media_typelist = mediatypeLocalServiceUtil
.getAllMediaType();
for (mediatype media_typelistitem : media_typelist) {
%>
<option value=<%=media_typelistitem.getPrimaryKey()%>><%=media_typelistitem.getMedianame()%></option>
<%
}
%>
</select>
</div>
<div class="span3">
</div>
//This is the div which i want to fixed just below the upper division
<div class="bordercolor" id="mydiv" style="display: none; text-align: center">
<IFRAME SRC="" id="reportpreview" style="text-align: center;"
marginheight="0" frameborder="0" onLoad="sizeFrame();"></iframe>
</div>
height of iframe assigned dynmaiclly within following script:-
function sizeFrame() {
var F = document.getElementById('reportpreview');
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
} else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}
///css for report preview id //an Iframe
#reportpreview {
float:center;
margin-top:10%;
margin-bottom:10%;
zoom: 1.2;
-moz-transform: scale(1.2);
-moz-transform-origin: 2 0;
-webkit-transform: scale(1.2);
-webkit-transform-origin: 2 0;
width: 720px;
min-height: 37px;
}
#reportpreview {
clear:left;
float:center;
margin-top:10%;
margin-bottom:10%;
zoom: 1.2;
-moz-transform: scale(1.2);
-moz-transform-origin: 2 0;
-webkit-transform: scale(1.2);
-webkit-transform-origin: 2 0;
width: 720px;
min-height: 37px;
}
add clear:left to iframe div