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>
Related
I have a question for a problem.
I made a Responsive Design for our Shop,
the Problem is when I test the mobile usability and the design (I'm testing with Browserstack)
everything looks fine.
When I'm testing it on my own phone (iPhone cases) it looks also fine even on my htc u11.
But when my boss looks to check on his phone (iPhone 11 Pro) he sees some issues and told me to fix it. I can't comprehend why?
The main problem is the text description.
the SHop Url for this category : https://www.subtel.de/Notebook-Zubehoer/?view_type=grid_view
Here are some screenshots and my html/css
css:
.productinfo_grid_view{
line-height: 16px;
overflow: hidden;
font-size: 13px;
font-weight: 600;
height: 34px;
white-space: normal;
grid-column: 1/7;
grid-row: auto;
margin-bottom: 5px;
margin-right: 5px;
width: 80%;
margin-left: 12%;
}
html:
<span class="productinfo_grid_view">
<a itemprop="url" id="[{$testid}]" href="[{$_productLink}]" title="[{$_sTitle}]"><span itemprop="name">[{$_sTitle}]</span></a>
</span>
as you can see its nothing special,
when you see the screenshots my boss gave me and the screenshot from my phone and browserstack. I'm confused has anyone a hint for me how to solve this kind of problem ?
1st smaller image is the screenshot from my boss the second image is how it should look and how it looks on my phone too.
Looks like you have set a fixed height to your description.
Try removing height: 34px;
EDIT:
or if you want to keep a fixed height and the overflow hidden
Try adding display: inline-block;
It seems like website is Zooming. Please disable zoom on a mobile web page using <meta> tag.
<meta name="viewport" content= "width=device-width, user-scalable=no">
OR
You have to remove fixed height of text description and add text limit for description.
Please update height: 30px; to height: 34px;
.productinfo_grid_view{
height: 30px;
}
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 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/
Trying to implement a style for a WebApp.
It seems that the CSS propery 'line-height' is different in the WebView.
I used this pen as example: http://codepen.io/bbredewold/pen/gGbht
The code is nothing special:
.flip {
position: relative;
width: 100px;
height: 100px;
}
.front {
width: 100%;
height: 100%;
font: 6em arial;
line-height: 100px;
text-align: center;
border: 2px solid #b4b4b4;
}
<div class="flip">
<div class="front">A</div>
</div>
Is this a bug? Or do I miss something?
Any ideas how to work around this? It's a headbreaker...
These are pictures with the differences. Picture 1 is problematic, picture 2 is nicely centered...
(I can't comment the original question, as my score is currently too low)
I realize this is a slightly old question but here goes:
I ran into something similar recently (Android 6, Chrome 55 etc) and I found that some of the Web Settings for WebView can make it interpret the page as if you had used the viewport metatag
<meta name="viewport" content="width=device-width, initial-scale=1">
In order to get the same result in Chrome I had to insert that viewport metatag.
I'm working on a small project for school, where we have to incorporate html5 and css3. It's just in the begin stage now, as I'm trying to create two separate css-files for a mobile and a desktop version.
For the mobile version, I'm trying to get the menu to just show as a list, but with a bigger font. I can in no way get this working though.
This is the css for the menu:
nav ul {
list-style: none;
background-color: green;
padding: 0;
}
nav li {
border-bottom: 1px solid black;
padding: 5px;
}
nav {
margin-top: -36px;
width: 100%
}
nav h1{
margin: 0;
}
This creates the following on my desktop
And on my iPhone
The font-size is set to 1em in the HTML in the top of the file. But 1em is not big enough for mobile devices, so I want it bigger, which seems impossible.
Even when I give the nav h1 a font-size of 10em, it doesn't get bigger than this:
While on my desktop it does work without a problem, there it looks like this:
The same problem occurs when trying to make the "blog posts" bigger, they just won't do it.
I normally have no trouble working with CSS, but this time I can't figure it out. Hope anyone can help! I have the feeling it's something very obvious.
Here is the complete CSS: http://snipt.org/zLic5
Here is the html: http://snipt.org/zLid2
i saw your html code. you are not adding any meta tag. certain meta tags are required, when you are developing mobile website,
for example you have to add -
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
<title>Welcome to your school name</title>
<!-- smart phone css -->
<link href="assets/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 480px)" />
<!-- Tablet -->
<link href="assets/tablet.css" rel="stylesheet" type="text/css" media="all and (min-width: 481px) and (max-width: 800px)" />
<!-- Desktop -->
<link href="assets/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:801px)">
I see a couple things I think can help your situation. Semantically, you don't want to use <h1> tags in your menu list at all. Remove those tags and apply the styling to the nav li css style and adjust the padding accordingly. Also, just a recommendation, but I've heard from a few websites that the ideal mobile font sizing is pt.
I hope this helps.
Go back to using the li for you navigation.
Then set the font-size to something acceptable (14px or 16px).
Then, in your css, use media-queries.
#media (max-width: 480px) { // will only happen on viewport less then 480 pixels (mobile)
li {
font-size:18px; // larger font (or whatever you want to do
padding: 20px; // can even increase your padding
}
}
Try css property text-size-adjust to scale text on mobile devices. Something like:
nav {
text-size-adjust: 200%;
}
nav ul {
text-size-adjust: 300%;
}
nav h1 {
text-size-adjust: 400%;
}