I would like to disable the zoom functionality on the a phpbb forum form which I am showing in my WebView whenever a user clicks on the username and password fields on a mobile Android phone.
It is advised to use
<meta name="viewport" content="width=max-device-width, user-scalable=no">
but I use PHP not HTML. Which PHP file do I need to edit and which code do I need to use to accomplish the same results as with the HTML code mentioned above?
After fiddling with SciTE and css, I edited the forum theme "form.css" and edited the section on inputbox:focus with 16px as this is the default zoom level value used by Android and iPhone. The WebView no longer zooms in on input field. hope this will help others as well.
.inputbox:hover, .inputbox:focus {
border: 1px solid transparent;
font-size: 16px;
outline-style: none;
Related
I'm working on a website in which part of the content (an "info" table that is different in every page) needs to be in a different div altogether in the responsive mode vs desktop mode.
I'm looking for a way in which I can repeat this div without having to copy it and paste it twice in every page. A bit like you'd have an php include query but without having a file specifically for it.
Is there a way to assign an ID / name for a part of the content on the same page and then "calling" it again?
EDIT with more info:
Basically every page has a floating div with information (it's a portfolio for an artist made by a friend that I've been asked to make responsive)
In the desktop version that info DIV is simply
#infodiv {
z-index:99;
position:fixed;
bottom:100px;
right:0px;
width:250px;
height:310px;
background-color:#FFF;
box-shadow: 2px 2px 10px #999;
text-align:left;
overflow:scroll;
}
For the responsive version I am including a navbar that will go over the entire page when a button is clicked (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_full)
The only way I've found to do this is to have #infodivdesktop that is hidden when accessing the website via mobile and to have the above navbar in the mobile version. Thus repeating the content of the div twice..
I have made this page with screen resolution 1366 x 768.The dashboard looks fine here but when i checked it on 1024 x 768 it got messy.Please help me! Here is the code.
<style>
#heading{
text-align:right;
font-size: 20px;
float:right;
margin:50px 20px;
}
</style>
<h1 align="center" style="position:absolute;top:30px; left:600px;">
KARMA <br>(3-SEATER)
</h1>
<div id="heading">
Home
Change Password
Logout
Help
</div>
if you are using html5
you can add
<meta content="width=device-width, initial-scale=1.0">
to the <head> element
this will adjust the body content to the width of any device irrespective of resolution n all...
You are after a responsive website. A responsive website is a site which changes layout depending on the size of the screen they are being displayed on.
There are a few different options when making your site responsive.
Responsive Framework
A responsive framework will help you to create responsive sites, bootstrap, and foundation are two key responsive frameworks widely used in responsive web design. If you are new to bootstrap, a website such as shoelace may help you to create a visual representation of the layout of the site on different devices
Media Queries
Media queries are used to display different style rules depending on the size of the screen. Please note, they do not change the core HTML, just the style, however this can be used to show / hide elements.
An example of a media query for a small perhaps mobile screen would be:
#media (max-width: 700px) { ... }
Any style rules you place in here will only be applied to the document when the width of the device is between 0 - 700 px
Read more on Media Queries here
Extra Note
Responsive and mobile friendly websites are now even more important, with googles recent update, making mobile friendly websites rank better in searches. You can check if they consider your site mobile friendly here
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am looking to be able to customize my userultra plugin on my wordpress site so that i can change the color of my sign in and sign up button text. As you can see from the picture below my form isn't very exciting and you cannot really see the text in the button. http://prntscr.com/67bkbu
Basically what i am after is for someone to explain to me how i can edit and customize the buttons on my login and sign-up forms whilst using the wordpress plugin Userultra.
Thanks
It is hard to tell how to do it when you only provide an image, but I'll try.
If you use a third party theme and not a child theme, install a plugin like Simple Custom CSS. If you have Jetpack installed, you can activate the Custom CSS module too. This will enable you to add CSS (= style code) to your site's <head>.
On your site, hover over an element that you wish to change, f.ex. the button, click on the right mouse button and select "inspect element" in the menu. This will open the Page Inspector.
The HTML for the button can look different, but it is likely in <input> field with 'type="submit". Possibly it has a class too, or an id. You can add style to the field type, the id or the class.
f.ex. the submit button here at Stackoverflow looks like this:
<input tabindex="0" type="submit" value="Add Comment">
This is the HTML. In the inspector you likely see it to the left. There is no class, or id, so the style is set by the field type.
To the right in the inspector you can see the styles. The following is the CSS by which styles get added to the input field with type submit (and to other buttons).
input[type=submit], input[type=button], .button, a.button:link, a.button:visited, .btn {
border: 2px solid #f00;
background: #222;
color: #fff;
background-color: #009afd;
border: 1px solid #1777b7;
box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 1px 1px rgba(100,100,100,0.3);
padding: 8px 10px 7px 10px;
border-radius: 3px;
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
}
If you would want to make change to this style, you can copy it to the plugins CSS field (text area) and delete everything you do not wish to change.
f.ex. to change the background colour of the type 'submit' to black, the following could be added:
input[type=submit] {
background: #000;
}
I hope that helps you on your way. Else, please post a link to the page, and describe in more detail what you would like to change. That is easier to help.
You need to install any visual composer plugin into your site in order to customize color and other visual appearance. Now talking about button fonts then internet is stuffed with so many plugins that enable you to do so. For instance you can see ilikenull.com. Also you can visit some other sites like noorsplugin, graphpaperpress, graphpaperpress etc. for additional options.
The responsive design I'm working through has presented another problem. To keep it simple, I set the body to snap down to 480px if the screen size or device size is less than 750px. Then, ideally, the screen on any device should scale to fit the width.
After some help here already today, I added the viewport meta, so now the CSS is responding to both my iPhone and Android, as well as the desktop browser when minimized.
The iPhone looks great; it zooms to the width, so even though the webpage is approx 480px, it fits perfectly into my 320px iPhone screen.
However, on the Android, it's zoomed in too far. About 25%-30% of the right side is off the screen and I have to scroll over to see it. If I pinch-to-zoom-out just a bit, then the window fits the screen width-wise and it looks fine. I don't know why I have to manually zoom out though.
Why is the Android not zooming out to the width of the page when the page is loaded?
My meta tag looks like this:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
My CSS looks like this:
#media all and (max-device-width: 750px), all and (max-width: 750px) {
body {max-width:480px;}
#container {
width: 90%;
margin: 0px auto;
padding: 0px;
min-width:480px;
}
#rightnav {display:none;}
}
if you're planning to display a 480px layout on a 320px screen you obviously have to zoom, so this works exactly as specified, but the iphone "smartly" ignores some rules to display it fullscreen.
you can set the initial-scale value to 0.75 to force every device to keep that zoom level in the beginning. of course the better solution would be to have yet another media query to scale down the screen contents even more on 320px devices.
I'm looking once again for help from the collective. I created a site which when viewed in IE scrolls choppy but is smooth and fine in all other browsers. I checked on two different laptops to be sure it wasn't just my video card.
I also removed all the images to see if it was an image display issue and that didn't fix the problem. Does anyone have any ideas?
UPDATE* : Based on the feedback I've also tried the page with the images, box-shadows, and google font's removed and I still get the choppy scroll. I've also now just removed the nav and side banner...ugh still no good.
FOUND IT: Ok so after essentially deconstructing my website piece by css piece I found that the cause of the choppy screen was due (mostly) to the use of the border-radius attribute (thanks for pointing me in that direction). my page has two container divs that I applied the following css to:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
Once I removed these the page was 90% smoother. I still get some choppy scrolling due to the header image it looks like but it's much better.
**The final solution was to:
1. Added conditional IE specifically to disable the border-radius when viewed through IE browser
2. To remove the last bit of choppy-ness :) I took all the images I was using, created a sprite for them in photoshop and then used yahoo Smush-It to compress that file. The site now loads great.
Thanks for the input all!
My url is http://monopolydealrules.com
Thanks!
**The final solution was to: 1. Added conditional IE specifically to disable the border-radius when viewed through IE browser 2. To remove the last bit of choppy-ness :) I took all the images I was using, created a sprite for them in photoshop and then used yahoo Smush-It to compress that file. The site now loads great.
Thanks All for your insight!
UPDATE* I also ran into a similar issue in safari mobile on my iphone for my mobile version. removing the border-radius attribute from the container element also fixed the speed for my mobile site.
It is very likely your box shadow causing the issue. There isn't a ton of documentation out there, but it is generally advisable not to use CSS box shadows that are that large.
http://nerds.airbnb.com/box-shadows-are-expensive-to-paint
I have a complex layout and IE9 was stutter scrolling for me too. In my case the regular page with the full layout scrolled fine but when adding a ckeditor in the same layout scrolling got very choppy. I guess IE just can't render rounded corners and a complex UI at the same time.
I used this to fix it:
<!--[if lt IE 10]>
<style type="text/css">
* {
-webkit-border-radius: 0px !important;
-khtml-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
}
</style>
<![endif]-->