People say to me that they somehow cannot find menu on my website when browsing on mobile devices. I use Twenty fourteen theme - of course there is a menu button, but people aren't so clever, or it's simple not intuitive. I would like to change the mobile menu button from "=" icon to simple "menu" text. Sorry for my english, polish native. Thanks in advance!
PS. I added in custom-css section something like that: .menu-toggle:before { content: "MENU"; } it changes the icon but if You look on my website www.bdk.brodnica.net using mobile browser there's still some problem with align or box size, tried to add width: parameter, but still don't work
Ok, when I finally got it i think it was simple, but it took me couple hours to find how to do that. Try add following code:
.menu-toggle:before {
color: #fff;
content: "MENU";
padding: 16px;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
padding-top: 20px;
}
.menu-toggle {
background-color: #000;
border-radius: 0;
cursor: pointer;
height: 48px;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: 0;
right: 0;
text-align: center;
width: 70px;
}
Related
I have a section of text created via the following Jade (an HTML templating engine):
header
div(class="header-logo") Order Of The Mouse:
div(class="header-phase") Phase 1.7 --
div(class="header-title") Operation Silk Scarf
This is styled using the following CSS:
header {
background-color: #78B82A;
color: #FFF;
text-shadow: 2px 2px 2px #000000;
text-align: center;
height: 115px;
}
.header-logo {
font: 1.5em Arial, sans-serif;
float: left;
position: relative;
display: inline;
margin-left: 1%;
margin-top: 7px;
}
.header-phase {
font: 12px Arial, sans-serif;
position: relative;
display: inline;
}
.header-title {
font: 3.4em Arial, sans-serif;
position: relative;
float: right;
top: 10px;
left: 12px;
}
(I know the CSS needs tidying up a bit, it was written in a hurry last night while quite tired).
My question is this: why does the left margin not scale for mobile devices? It seems to scale ok on my laptop in different browsers and when the window is resized, but when I access with my android device (again I've tried two different browsers) the div text is way over to the right of the screen, instead of slightly indented from the left, as I would have expected.
I can include screen-shots on mobile and non-mobile devices if necessary.
Also, it used to and should look like this:
Now the code above displays as follows in a non-mobile browser (and similarly in a mobile browser):
Which is no good at all.
When the Jade is converted to HTML it currently looks like this:
<header><div class="header-logo">Order Of The Mouse: </div><div class="header-phase">Phase 1.7 --</div><div class="header-title">Operation Silk Scarf</div></header>
Ok, I looked over it again with fresh eyes and it looks as if this was the solution to the resizing issue:
header {
background-color: #78B82A;
color: #FFF;
text-shadow: 2px 2px 2px #000000;
height: 115px;
}
.header-logo {
font: 1.5em Arial, sans-serif;
float: left;
position: relative;
display: inline;
margin-left: 1%;
margin-top: 7px;
}
.header-phase {
font: 14px Arial, sans-serif;
position: relative;
display: inline;
left: 6px;
top: 10px;
}
.header-title {
font: 3.4em Arial, sans-serif;
position: relative;
top: 12px;
left: 80px;
}
Lord alone knows how it managed to look right last night with the code I had but somehow it did. Strange times.
I have been working on a mobile app using Polymer. I just recently ran into a problem where Polymer's core-overlay box does not let me scroll down, and it just leaves content cutoff. It's basically an info box that comes up when you tap it with your finger.
Everything was working perfectly last Tuesday, until the big Android 5.0 update hit the very next day on my phone. That's when things started to become buggy. My co-worker's phone still has the Android 4.4 version, and it scrolls down and up just fine. I'm wondering if anyone else has/is running into this too or have a solution to this. Also, I am using a Samsung Galaxy S5 with Cordova.
Here is the CSS and some of the HTML for the core-overlay element that I mention:
<core-overlay id="infoOverlay" class="dialog" layered backdrop transition="core-transition-center" core-overlay-toggle>
<style no-shim>
.dialog {
box-sizing: border-box;
-moz-box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
color: #999;
font-size: 1.4em;
text-transform: none;
-webkit-user-select: none;
-moz-user-select: none;
overflow: hidden;
background: black;
padding:20px 20px;
outline: 1px solid rgba(0,0,0,0.2);
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
border: 2px solid white;
}
#infoOverlay {
box-sizing: border-box;
/*text-align: center;*/
width: 80%;
height: 70%;
}
#settingsTitle {
color: white;
font-size: 1.5em;
padding-bottom: 5px;
}
.settingsText {
border-bottom: 1px solid #999;
padding-bottom: 20px;
padding-top: 10px;
}
.settingsTextLast {
padding-top: 10px;
}
</style>
<div id="dummydiv">imagine enough divs</div>
</core-overlay>
Any help, information, or anything would be greatly appreciated! I think I provided enough information, but I will provide more upon request.
Thanks for your time!
This should work if you set overflow in your .dialog to auto or scroll.
I'm trying to position a form field such that it is always 40% down the page and takes up exactly 64% of the screen width, regardless of the screen it is on, the height of the form element is always supposed to be exactly 5% of the screen's height.
This seems like it should be trivial but I have been unable to figure it out based on any of the vertical positioning tutorials here. I can get the positioning correct using code similar to below:
#welcome_email {
/*positioning */
position: absolute;
top: 40%;
left: 18%;
width: 64%;
box-sizing: border-box;
height: 5%;
/*content*/
background-color: transparent;
border: solid;
border-color: red;
}
#welcome_password {
/*positioning */
position: absolute;
top: 45%;
left: 18%;
width: 64%;
height: 5%;
box-sizing: border-box;
/*content*/
background-color: transparent;
border: solid;
border-color: red;
border-top: none;
}
<input id="welcome_email" placeholder="E-Mail"></input>
<br>
<input id="welcome_password" placeholder="netid(?)"></input>
But then when the soft-keyboard opens on android everything shrinks because the viewport sizes have changed. Is there any way I can achieve both of these goals? Ideally when the keyboard is open it would just focus on the form field like any other form on the internet without rescaling (with scrolling enabled) but when the keyboard is down the element would be positioned in the way depicted above. (You can see similar behavior by opening chrome's CDT for example)
Another way to think of this question is, can I scale and position elements relative to the screen size only once and not everytime the viewport size changes?
Try to an extra css propierty to your "welcome" fields:
min-height:5%;
If i doesnt work try to use a value in pixels. min-height:30px;
EDIT:
I added a div that cotains the 2 inputs, try it: http://jsfiddle.net/7aoo6ktf/
<div class="container">
<input id="welcome_email" placeholder="E-Mail"></input>
<br>
<input id="welcome_password" placeholder="netid(?)"></input>
</div>
.container{
position: absolute;
top: 40%;
left: 18%;
width: 64%;
}
#welcome_email {
/*positioning */
box-sizing: border-box;
width:100%;
height: 5%;
/*content*/
background-color: transparent;
border: solid;
border-color: red;
}
#welcome_password {
/*positioning */
height: 5%;
width:100%;
box-sizing: border-box;
/*content*/
background-color: transparent;
border: solid;
border-color: red;
border-top: none;
}
My advice would just be to set a size e.g. 50px;. What I think might be happening is that once the keyboard appears your application reloads and applies the 5% based on the screen size minus keyboard size.
I am using a simple jQuery/CSS accordion panel for a mobile website (coded as a flexible design with a few media queries thrown in). It's behaving as expected in most of the browsers I've been able to test, but there is a bug within the accordion in the default browser on my Android device (Galaxy Nexus, Android 4.2.2). When I open a panel, all of the contents jump into a weird formatting layout, but if I click on another panel or close the open panel, all of the contents jump into the layout I expected them to have.
The script:
$('.accordion > .heading > a, .accordion > .heading').on('click', function () {
var $next = ($(this).is('a') ? $(this).parent().next() : $(this).next());
$next.slideToggle();
return false;
});
The CSS:
.accordion {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.accordion .slidepanel {
background: #f6f6f6;
display: none;
margin: 0;
padding: 3%;
position: relative;
}
I have tried setting the panels to be open by default and all of the formatting within is as expected. I have racked my brain trying to figure out a fix for Android -- anyone out there got some other ideas?
Simple answer found after hours of this headache:
.accordion .slidepanel {
background: #f6f6f6;
display: none;
overflow: hidden; <<---
margin: 0;
padding: 3%;
position: relative;
}
Something to do with the height and width that the .slideToggle(); needs to calculate while it's doing its magic...
I have created a website for a client that works on all web browsers as I intended except for Android. For reasons unknown the Android browser resizes my Menu bar as well as the part depending which phone it is running on.
If you would like to see the code please go to this link
This is a screen shot from the Galaxy Nexus
screen shot from Galaxy Nexus
As you can see the text has been pushed into a tall thin column. I have no idea why it is doing this.
Any help would be much appreciated.
Delete everything in the #AboutUs From the #AboutUs in Style.Css line 445.
Before
#AboutUs
{
height: 655px;
}
After
#AboutUs
{
}
As for the footer, remove the width from its css (#legal) (Line 693 in Style.CSS)
Before
#legal
{
position: relative;
font-size: 10px;
margin: 0px auto;
width: 130px;
padding: 0px;
line-height: 1.1em;
text-align: center;
color: #606060;
top: 5px;
}
After
#legal
{
position: relative;
font-size: 10px;
margin: 0px auto;
padding: 0px;
line-height: 1.1em;
text-align: center;
color: #606060;
top: 5px;
}