I am trying to build a static website with multiple checkboxes, but the CSS only works on chrome (using F12 to see how it displays on a mobile), there is a trouble displaying the website on my Iphone (the checkboxes doesn't follow display: inline-block)
Here is the code I used:
HTML
<div class="checkboxContainer">
<label><input type="checkbox" id="checkbox1">label1</label>
<label><input type="checkbox" id="checkbox2">label2</label>
</div>
CSS
#media (max-width: 700px) {
.checkboxContainer {
display: inline-block;
padding-top: 10px;
padding-left: 0;
padding-right: 0;
}
.checkboxContainer label {
white-space: nowrap;
}
}
How it looks on chrome using F12 displaying on iPhone XR:
How it looks on my iPhone:
Related
I am using ninja form on Wordpress and want to break the line in dropdown on safari with custom css code since it dones't fit in one line on mobile. I checked with the toggle device tool bar in inspect and its worked in that tho.
here is the code
#nf-field-46 {
font-size: 12px;
}
#media screen and (max-device-width:640px), screen and (max-width:640px) {
#nf-field-46 > option {
font-size: 12px;
word-wrap: break-word;
width: 300px;
white-space: normal;
-webkit-appearance: none
}
}
This question already has answers here:
How to apply specific CSS rules to Chrome only?
(13 answers)
Closed 5 months ago.
For some reason Chrome shows this span unusually higher than Firefox.
As a result, I wrote the following CSS:
#media screen and (-webkit-min-device-pixel-ratio: 0) {
.selector:not(*:root),
span.justForChrome {
display: block;
margin-top: 23%;
text-align: right;
}
}
The following is the HTML:
<li class="nav-item">
<a
class="nav-link"
data-toggle="tooltip"
title="Shopping cart"
id="{{ shoppingCart }}"
routerLink="/shopping-cart"
><span class="justForChrome"
>Shopping Cart<span id="counter">{{ counter }}</span></span
></a
>
</li>
While this is working in Chrome, now Firefox is showing the span to high. If I set the margin-top to 100% in Firefox developer tools, then it is perfect, but margin-top at 100% on Chrome sends the span upwards.
What can I do? I swear this was working a few weeks ago. I would expect that Firefox would not even find the span.justForChrome selector rule in the CSS
Migrating OP's solution from the question to an answer:
Whether it is the fact that I have to compile the Angular app, which
creates a new "bundled" stylesheet or if it is because I placed the
media queries at the end of the scss file, I do not know, but here are
the media queries that I used at the end of the scss file, which
worked:
#media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
.selector:not(*:root),
span.justForChrome {
display: block;
margin-top: 23%;
text-align: right;
}
}
#-moz-document url-prefix() {
span.justForChrome {
display: block;
margin-top: 94px !important;
text-align: right;
}
}
Currently the site is still in beta, but here is a screenshot:
Both the words "Shopping Cart" and the number are on the "baseline" of
the navbar.
I've tested the following code in Microsoft Edge 42.17134.1.0, Firefox 65.0 (64-bit), and Chrome Version 72.0.3626.81 (Official Build) (64-bit) and it works as expected in Chrome.
#media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.selector:not(*:root), .chrome {
color: green;
}
}
Note that .chrome is a class name and you can change with other class names.
Check the following JsFiddle or snippet:
.test {color:red;}
#media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.selector:not(*:root), .chrome {
color: green;
}
}
<p class="test chrome">I Should be Green if you're in chrome, Red in all other browsers</p>
This question already has answers here:
Styling input buttons for iPad and iPhone
(6 answers)
Closed 4 years ago.
I have simple CSS for styling a button: <input class="button" type="submit" value="Join">
...
.header__form-submit .button {
background: #3371E3;
border-radius: 0 5px 5px 0;
}
...
#media screen and (max-width: 767px) {
...
.header__form-submit .button {
width: 100%;
border-radius: 5px;
}
}
It renders fine on desktop, on any browser and on mobile preview in Chrome. However, when I open this on an iPhone the button has round corners.
Chrome preview:
iPhone either Chrome or Safari:
Why is this happening? Is there a problem with styling <input /> on iOS?
Thank you
disable default operating system styling
webkit-appearance: none;
Edit: add this to your css
input {
-webkit-border-radius:0;
border-radius:0;
}
As well as the above line.
The way to go is:
<button class="button" type="submit">Join</button>
I'm developing a login form and I'm having difficulties in cross browser rendering.
When I use Chrome everything is displayed as it should be and the footer on the login form is where it should be. However when I open the login form with Firefox, the footer is not where it should be e.g at the bottom of the login form.
I want to add a <hr> which will only be displayed when the form is opened in Firefox browser and the width of the display is higher than 768px. It shouldn't be displayed in other browsers like Chrome, Safari, etc.
I'm using jade/pug and bootstrap for the front end and css to apply certain rules to the form.
My code is below.
Jade/Pug:
hr.div_buttons_ff
.col-md-12.col-lg-12.col-xl-12.col-sm-12
footer.footer_desk
hr.div_footer
p.no_acc_desk Don't Have an account ?
a.join_now_desk(href="#") Join now.
CSS:
#media screen and (min-width:768px) and (-moz-document)
{
.div_buttons_ff
{
padding: 1px 0px 1px 0px;
border: none;
outline: none;
clear: both;
}
}
I also tried with nested media query like the following:
#-moz-document url-prefix()
{
#media screen and (min-width:768px)
{
.div_buttons_ff
{
padding: 1px 0px 1px 0px;
border: none;
outline: none;
clear: both;
}
}
}
Also I tried nesting the -moz-document url-prefix() into media but again with no success.
I was testing the three-state radio button i've created.
The code is too long to post over here... Link to code: codepen
input {
cursor: pointer;
width: 4rem;
height: 4rem;
position: absolute;
margin: 0;
padding: 0;
opacity: 0;
z-index: 1;
}
As you can see, i've created three radio buttons: each of them is a square of a given size, and absolute positioned. In this way the user can click/tap any part of the control, and the toggle should move accordingly. This works well on desktop devices.
On mobile, it works well on IE shipped with windows phone 8 devices, works good on Chrome for Android, but it's not working on Firefox for Android. If you change the input's opacity to 1, you'll see Firefox is going to apply the browser-default size to these controls, making impossible to these controls to cover the part they are assigned...
I'm testing it with CyanogenMod 11.0 (based on Android 4.4.4) on the Oneplus One.
Is it a bug? Is there a way to fix it?
You should style the <label> instead of the input.
The label will select the radiobox you need. And your radiobox will be hidden.
html
<input type="radio" id="yes" />
<label for="yes">Yes</label>
css
input {
visibility: hidden;
}
label {
display: inline-block;
height: 30px;
width: 50px;
}