I am putting a Formidable Form on an html page by using an <iframe>, but I'd like it to be full screen on a mobile device. So far I'm using the following code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);
body {
background-color: #f3eedd;
width: 750px;
overflow:scroll;
overflow-x:hidden;
}
h2 {
font-size: 20px;
color: #c13e18;
margin: 10px 30px 10px 30px;
}
</style>
</head>
<body>
<div id="header">
<h2>Book Supheroes Unite</h2>
</div>
<div id="form">
<iframe src="http://challenge-the-box.com/wp-admin/admin-ajax.php?action=frm_forms_preview&form=sbyrt02
" frameborder="0" scrolling="no" style="width:280px;height:535px;"></iframe></div>
</html>
I believe it has something to do with viewports? However, I'm not entirely sure on this!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This meta tag allows you to target mobile devices and sets the width to the screen size.
Documentation provided here!
Also consider migrating to bootstrap a CSS framework for Responsive web design! Twitter Bootstrap
Personally I would use a library like bootstrap to acheive this adding something like this to your head.
<meta name="viewport" content="width=device-width, initial-scale=1">
Bootstrap allows you to create dynamic grids with your content regardless of the device size. You simply create divs inside a larger container for example the fluid container:
<div class="container-fluid">
<div class="row">
...
</div>
</div>
You can use the media queries !
looks like this:
#media (max-width: 640px) {
//your css to make it full screen
}
Related
this is the site
http://www.touziwangzhan.com/en/gpu2.html
i have added viewport, but with image, the text saw on phone is small, how to make the text bigger when see on the phone, what should I add to the code?
this is the site
http://www.touziwangzhan.com/en/gpu2.html
i have added viewport, but with image, the text saw on phone is small, how to make the text bigger when see on the phone, what should I add to the code?
if i higher the initial-scale , sometimes the image will beyond the phone screen
here is the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="CPU benchmark">
<meta name="description" conten="CPU benchmark">
<meta name="viewport" content="width=device-width, initial-scale=0.46">
<title>GPU Benchmark, GPU Comparison, GPU Chart - Shenglong</title>
<style>
a{
text-decoration:none;}
#s1{
max-width: 100%;
display: block; }
#s2{
font-size:36px;
text-align:center;
margin-top:1.2% ; }
#s3{
text-align:right;
margin-right: 4%;
margin-top:6.03%;
font-size:20px;
color:black;
line-height:160%; }
</style>
</head>
<body>
<img id="s1" src="/b1.png" height="90" width="1519"
style='position:absolute;left:0px;top:0px;right:0px;z-index:-1'>
<p id="s2" style="color:white">Video Card Photo Chart</p>
<div style="text-align:right;margin-right: 0.8%;margin-top:-5.9%;">
1</div>
<div id="s3" >
CPU Benchmark
Video Card Benchmark
CPU Photo Chart
Video Card Photo Chart
</div>
<p style="text-align:center"></p><br>
<br><br>
<div align="center"><img style="margin-left:0px;margin-top:16px;" src="gpu.jpg">
</div>
<div style="text-align:right;">
n</div>
<br><br>
<div style="text-align:center">GPU Benchmark, GPU Compare, GPU Comparison, Shenglong</div>
<br>
<div style="text-align:center">1014</div>
</body>
</html>
Use media query in CSS to make your text bigger: see here
To check the mobile for example you can use:
#media only screen and (pointer: coarse){
#s3{
font-size: 30px;
}
}
You correctly added the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=0.46">
To make the content even larger set the initial-scale value to 1.
The initial-scale property controls the zoom level when the page is first loaded.
MDN Web Docs | Using the viewport meta tag to control layout on mobile browsers
The size of everything should now be readable and similar to larger screens.
If I add width to any element on page which is larger than screen than on mobile devices (or Developer Tools enabled Touch simulation) I get empty space below footer.
Original site which has problem: https://www.kanemi.lv/oskarsvesters.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body style="width: 2000px;">
Test
</body>
</html>
body {
min-width: 0;
}
try this
on my WordPress Website I want to display another logo on the mobile version than on the desktop version. I manage to achieve this using the following code:
#media only screen and (max-width: 981px) {
#logo {
content: url("URL OF MOBILE LOGO");
}
}
This works pretty decent but now I have big problem. The link for this logo is missing. Usually the logo should link to "/home/" However, it does not.
I tried to add the link in the header via html with the following code:
<a id="logo" href="/"><span>Return to Home Page</span></a>
This just clones the mobile logo and puts in above or below the header. But with a link :/ ...
Could you guys please help me out on this one :)
Best regards,
Marius
You can use JQuery append() to achieve this.
Final Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#media only screen and (max-width: 981px) {
.mobileLogo a:before {
content: 'MobileLogo';
display: block;
}
}
</style>
</head>
<body>
<header>
<div class="desktopLogo">DesktopLogo</div>
<!-- append mobileLogo here -->
</header>
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- custom script -->
<script>
$('header').append('<div class="mobileLogo"></div>');
</script>
</body>
</html>
Hi i searched it a lot but i cannot find any solution.
Actually I want to have image for every HTML section. and it should be responsive.
here is my code
<section id="portfolio">
</section>
<section class="success">
</section>
and CSS
#portfolio {
background: url(../img/STS_247650163-Web.jpg);
background-size: cover;
height:400px;
}
.success {
background: url(../img/success.jpg);
background-size: cover;
height:1100px;
}
now if I remove height the images disappear and if add them the images becomes big and ugly.
i tried.. different method but nothing is working
thank you
You have two ways to make responsive images.
Use bootstrap- .img-responsive
use custom media queries -
#media screen and (max-width: 368px) {
img.yourclass{
min-height: 150px or auto;
}
}
Better use bootstrap for your divs or section, try this -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img class="img-responsive" src="http://placehold.it/350x150" alt="Chania" width="460" height="345">
</div>
</body>
</html>
I've a website that I'm building which is 700px width on desktops and mobile. On the desktop the 700px div is centred. On mobile the 700px div just needs to fill the screen.
Test code below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=700" />
<style>
div#wrapper
{
width:700px;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="wrapper">
<img src="/test.jpg" alt="Test image 700px width in 100px strips" />
</div>
</body>
</html>
This works fine across desktop browsers and most mobile phones. However on my daughters cheapo smartphone the browser zooms right in and only displays about 350px.
How should I approach this issue. You would think that it would be an easy situation to resolve but it's proving not too be! Messing about with the other meta tag attributes (initial zoom etc) has no effect on this particular smartphone.
The Huawei phones browser is Agent: Modzilla/5.0(Linux; U; Andriod 4.2.2;en-gb;HUAWEI Y330-U01 Build/HuaweiY330-U01)AppleWebKit/534.30(KHTML, likeGecko)Version/4.0 Mobile Safari/534.30
Use this
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Explanation:
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
Demo
Without view port
With view port
Read this - https://css-tricks.com/snippets/html/responsive-meta-tag/ and this http://www.w3schools.com/css/css_rwd_viewport.asp
I don't have an Android device to verify this, but perhaps this would be solved with a relative width and a maximum width:
<style type="text/css">
div#wrapper
{
width:100%;
max-width:700px;
margin-left:auto;
margin-right:auto;
}
</style>
max-width overrides width when its conditions are met, so a smaller display like that on your daughter's phone should use a full width while a larger display would only be 700 pixels wide.
(I added the type attribute to your <style> tag for completeness. Your code should render just fine without it.)
Try this, hope it will solve your problem
<meta name="viewport" content="width=device-width"/>
instead of
<meta name="viewport" content="width=700" />
I would set your CSS width to 100%, not 700px. It's generally best to avoid hardcoding dimensions when possible. Also as suggested by another answer, max-width could be useful as it overrides width when specified.
You could then use screen size media queries(https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) to put a border div around the image on large displays.
Add the below link inside the head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Style Sheet
<style type="text/css">
#media only screen and (max-width: 699px)//media query for the resolution below 700px {
div#wrapper
{
width:100%;// this will took full width
}
}
</style>