I am creating a page with a button and inside this there is an arrow and text. So, the idea here is for the arrow and the text to be side by side, where the text is on the left and the arrow on the right.
The problem is: the css that i'm applying for responsive works well in my android phone, but it's not working on iPhones (and not working on Safari and Chrome inside the iPhone).
The button:
I have tried to change the sizing unit (from vw to percentage), in case it was not compatible with Safari browsers (that would be also weird) and tested again. the problem is still there and everything is okay on android.
The CSS code outside the Media Query:
.subs_arrow {
width: 13vw;
height: 5.5vh;
vertical-align: sub;
}
.subs_text {
font-size: 9vw;
display: inline-block;
}
Here is Media Query CSS:
#media screen and (max-width: 451px) {
.subs_arrow {
width: 40%;
height: 80%;
vertical-align: sub;
}
.subs_text {
font-size: 85%;
}
}
Viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Here is the HTML:
<button class="lp6_button">
<span id="form_pin_code_add_btn_send" class="subs_text">إشترك</span>
<img src="./img/white-right-arrow-md.png" class="subs_arrow">
</button>
What is the solution here?
It might be because iPhones (especially older ones) can have smaller screen sizes than most Android phones. Therefore, the text can be pushed down in order to avoid smushing. For your case, I would use flexbox instead of the approach you're taking.
.yourentirebutton {
display: flex;
justify-content: center;
align-items: center;
}
Try to add <meta name="viewport" content="width=device-width, initial-scale=1"> in your head tag. You can read more about it here: https://css-tricks.com/snippets/html/responsive-meta-tag/
Related
I tried adding a media query to my vs code project and just to check if it is working I like to do a small check of changing the background color. For some reason it will not work in vs code, Whenever I click inspect on the static page and lower the width the background color does not change.
I then went into code pen and tried it out there with the same code and it works fine there. What could it be? Is it a vs problem or something I'm doing wrong in the code?
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
body {
background-color: #2f2f2f;
}
#media (min-width: 300px) and (max-width: 768px) {
body {
background-color: yellow;
}
}
<meta name=”viewport” content=”width=device-width”>
As Quentin noted and I have confirmed, the quotation marks are messing with the meta tag. It should look like this:
<meta name="viewport" content="width=device-width" />
But when pasting your code, VS code auto corrects to this (improper):
<meta name="”viewport”" content="”width" ="device-width”" />
Hope this helps!
My show/hide tags won't work on mobile devices. It only works on desktop (and if I tick desktop on the mobile device). When I use the chrome dev tools and switch it to mobile I replicate the issue.
This is my first website, so please be gentle, I am planning on upgrading as I learn so there's no Javascript in these show/hide divs just HTML and CSS.
I'm sure it was working when I first set it up? I've been playing around with "position". I'm not sure if the divs position has anything to do with it? I've played around with:
a) #media but it doesn't seem to help?
b) changing the meta for viewport
c) pulling my hair out
no luck, any help and feedback appreciated :)
body {
position: absolute;
margin: 0;
text-align: center;
font-family: 'Merriweather Sans', sans-serif;
font-size: 1.5em;
}
#myStory {
display: none;
padding: 20px;
position: relative;
}
:checked+#myStory {
display: block;
}
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-capable" content="yes" />
<h2>My Story</h2>
<input type="checkbox" id="story" style="display: none;">
<div id="myStory" style="margin: auto; text-align: left ">
<p>I was born in the mid 1970's in New Zealand-Aotearoa (in a small city called New Plymouth).
</div>
<label for="story">Show/hide</label>
I'm trying to get a button to have a responsive width based on the screen size. I've got it so it works perfectly when I resize a regular Chrome window, but when I toggle the display to mimic a device (any mobile device/ipad/etc.) the width of the button immediately gets much smaller. It looks the same even when I open it on my iPhone, so it's not just some weird issue with Chrome's tools. When I inspect the element, I can see that width has been disabled:
I thought there might be some CSS overriding it, but then that doesn't explain why this behavior disappears entirely when I'm simply resizing Chrome or even picking one of the devices with wider resolutions than any of my rules. I have still tried removing all of my #media rules and the behavior persists.
The button is pretty basic HTML, and it's not even wrapped up in a div that could be causing the issue (unless the fact that there's a flex box right under it could be a problem?):
<body>
<button id="ranking-button" type="button" onclick="openRanking()">RANKING</button>
And all of the relevant CSS is here:
#ranking-button {
position: fixed;
top: 0;
right: 0;
margin: 20px;
font-family: 'Black Han Sans', sans-serif;
font-size: 24px;
color: black;
background-color: #ffcc00;
width: 40%;
height: 60px;
cursor: pointer;
border: 0em;
}
#ranking-button:hover {
background-color: black;
color: white;
}
button:focus{
outline: none;
}
#media (min-width: 600px) {
#ranking-button {
width: 200px;
}
}
I've also tried adding !important to it, and it then did work for mobile - but then stopped changing for any other resolution and was stuck at 40% all the time.
I'd given up on this minor side project, and then randomly realized what I'd done wrong while doing something completely different - in case anyone makes the same mistake as me, I'd managed to forget to set the viewport. Adding this made the CSS work:
<meta name=viewport content="width=device-width, initial-scale=1">
When you use a #media query, it does anything inside it when the 'rules' inside the brackets are accepted.
So, if you say that max-width:1000px then, if your browser is 600px then anything inside it will apply, if not, then it will be ignored.
For screens smaller than 600px, your normal #media css rule will be accepted and there you said width:40%, and you can't measure in %.
#media only screen and (max-width: 600px) {
#ranking-button {
width: 200px;
}
}
This has me stumped. This works fine in browsers (tested Chrome, Firefox, and Safari), but doesn't work in Chrome emulator, Chrome mobile, or Firefox mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<meta title="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 50%;
float: left;
}
#media screen and (max-width: 500px) {
div {
width: 100%;
}
}
</style>
</head>
<body>
<div>Left</div>
<div>Right</div>
</body>
</html>
My original problem was more complex, but even boiling it down to the simplest form it's not working. Tried the above with different combinations such as display: inline-block; instead of float: left;, different viewport meta tags, adding only screen to the media query, other tags than plain divs, etc.
My original problem surfaced when doing work with Web Components + ShadowDOM, but it doesn't seem to be related to those. Made sure to bust all my caches while testing.
Am I going nuts?
Oh wow I'm dumb. Had a typo in the meta tag. Should be name instead of title:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I am working on making a theme mobile responsive. You can view it here, http://107.170.168.111/
When viewing on desktop and resizing the browser, it works fine. However, on actual mobile devices it doesn't seem to be working correctly (the sidebar should be hidden and a mobile nav should appear). It works on single post views such as: http://107.170.168.111/2015/04/27/szechuan-green-beans/#more-9327
but not on the actual index. I can't seem to figure out why.
My media queries, of course, are at the end of my CSS document:
#media screen and (max-width: 640px){
.hide-for-small{
display: none !important;
}
.show-for-small{
display: block !important;
}
.sidebar-container{
display: none !important;
}
#sidebar{
display: none !important;
}
.wrapper{
width: 100%;
}
#content{
position: relative;
display: block;
margin: 0;
width: 100%;
padding: 110px 0 0;
}
}
and in my <head> i have <meta name="viewport" content="width=device-width, initial-scale=1">
I'm pretty stumped, any suggestions? Thanks!
Update:
meta viewport is located in header.php - which is included on index.php, but for some reason is not being displayed. The same code is used on single.php which works.
Header.php -> https://gist.github.com/buschschwick/a7f67176e748c08e314a
Single.php -> https://gist.github.com/buschschwick/d3e2bdff07fffcb4b01a
Index.php -> https://gist.github.com/buschschwick/56576b2294b160271a3a
Solved:
A disabled caching plugin was still serving the old version of index.php that did not include the meta viewport. Thanks everyone.
Change your #media from "screen" to "all". You are targeting all devices not only screens:
#media all and (max-width: 640px){
// your css
}
EDIT:
When you view your source code, you cant find any meta tag for "viewport". I used your code and added viewport in my editor and it worked just fine:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Problem: the index page does not have meta viewport. You need to add that in index page.