I can't seem to get this site to format correctly (be "responsive" to mobile) when viewing with mobile devices.
I am using Bootstrap, but when I view from a mobile device, it just looks like a normal desktop is viewing it. Other sites I have done, it "zooms" in on the text and such to look nice on mobile.
I'm sorry if I'm missing something small here, but any help would be greatly appreciated!
Here's the code I'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TITLE HERE</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/modernizr-2.5.3.min.js"></script>
</head>
<body>
<div role="main">
<header>
<div class="container">
<div class="row address">
<div class="span12">
<h2><?=$content['address']?><br/>
<?=$content['city']?> <?=$content['state']?> <?=$content['zip']?></h2>
</div>
</div>
<div class="row-fluid prop_info">
<div class="span12">
<h3>$<?=number_format($content['price'])?> | <?=$content['beds']?> Bedrooms | <?=$content['baths']?> Bathrooms | <?=number_format($content['square_feet'])?> Square Feet | MLS# <?=$content['mls_id']?></h3>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row center">
<div class="span12">
<ul class="nav nav-pills menu">
<li>VIDEO</li>
<li>PHOTOS</li>
<li>WALKSCORE MAP</li>
</ul>
</div>
</div>
<div class="container">
<div class="row center">
<div class="span12">
<div id="description-shadow-video-top"></div>
<iframe id="vp1HMbXI" title="Video Player" width="100%" height="auto" frameborder="0" src="<?=$content['video_url']?>" allowfullscreen></iframe>
<div id="description-shadow-video"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<?=$content['main_content']?>
</div>
</div>
</div>
<br/>
<div class="container">
<div class="row">
<div class="span12">
<div class="pull-left">
<br/>
<br/>
<br/>
<img src="/img/foundation/presented-by.png" width="120" alt="" />
</div>
<div class="pull-left">
<img src="/img/some_pic.jpg" alt="" name="agentImg" width="90" id="agentImg" />
</div>
</div>
</div>
<br/>
<div class="row center">
<div class="span12">
<h3><?=$user['first_name']?> <?=$user['last_name']?></h3>
<br />
<?=$user['company']?><br /><?=$user['address']?>
<br />
<?=$user['city']?>, <?=$user['state']?> <?=$user['zip']?>
<br />
<br />
<?=$user['contact_number']?>
<br />
<?=$user['email_address']?>
<br />
<br />
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="span12">
<a href="http://www.somesite.com" target="_blank">
<img src="/img/the_logo.png" width="210" />
</div>
</div>
</footer>
</div>
</body>
</html>
It seems that you are only using span12 in all the rows, which means that they will never get segmented when the viewport changes. A large part of having a responsive grid layout is breaking the elements of a row into segments so that the row's layout can be adjusted if the viewport falls below certain thresholds.
If the primary <div> in every row is span12 all the content in the row will remain essentially width=100% and the content will only scale down as the viewport decreases.
I would suggest avoid using span12 for every primary <div> and spend some time reconsidering the granularity of the content. See the Twitter Bootstrap documentation on Scaffolding for reference.
Use this layout, i think it will solve your issue. I removed the row class.
TITLE HERE
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable">
<link rel="stylesheet" href="/css/bootstrap.min.css"> <link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/modernizr-2.5.3.min.js"></script> </head> <body> <div role="main">
<header>
<div class="container">
<div class="address">
<div class="span12">
<h2><?=$content['address']?><br/>
<?=$content['city']?> <?=$content['state']?> <?=$content['zip']?></h2>
</div>
</div>
<div class="row-fluid prop_info">
<div class="span12">
<h3>$<?=number_format($content['price'])?> | <?=$content['beds']?> Bedrooms | <?=$content['baths']?> Bathrooms | <?=number_format($content['square_feet'])?> Square Feet | MLS# <?=$content['mls_id']?></h3>
</div>
</div>
</div>
</header>
<div class="container">
<div class="center">
<div class="span12">
<ul class="nav nav-pills menu">
<li>VIDEO</li>
<li>PHOTOS</li>
<li>WALKSCORE MAP</li>
</ul>
</div>
</div>
<div class="container">
<div class="center">
<div class="span12">
<div id="description-shadow-video-top"></div>
<iframe id="vp1HMbXI" title="Video Player" width="100%" height="auto" frameborder="0" src="<?=$content['video_url']?>" allowfullscreen></iframe>
<div id="description-shadow-video"></div>
</div>
</div>
</div>
<div class="container">
<div class="span12">
<?=$content['main_content']?>
</div>
</div>
<br/>
<div class="container">
<div class="span12">
<div class="pull-left">
<br/>
<br/>
<br/>
<img src="/img/foundation/presented-by.png" width="120" alt="" />
</div>
<div class="pull-left">
<img src="/img/some_pic.jpg" alt="" name="agentImg" width="90" id="agentImg" />
</div>
</div>
<br/>
<div class="center">
<div class="span12">
<h3><?=$user['first_name']?> <?=$user['last_name']?></h3>
<br />
<?=$user['company']?><br /><?=$user['address']?>
<br />
<?=$user['city']?>, <?=$user['state']?> <?=$user['zip']?>
<br />
<br />
<?=$user['contact_number']?>
<br />
<?=$user['email_address']?>
<br />
<br />
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="span12">
<a href="http://www.somesite.com" target="_blank">
<img src="/img/the_logo.png" width="210" />
</div>
</div>
</footer> </div> </body> </html>
Related
Seems like I can't get that image to be aligned with the Text.
I am trying to get that logo aligned with those two sentences.
Also, There was no style setting. Just the default Bootstrap.css file.
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<img src="../img/bg.png" style="float:left;width:150px;height:150px;margin-left:20px;margin-right:20px;margin-bottom:20px;">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
</div>
</div>
You can do that with bootstrap media object, no need to use any css for that.
Check that link you can have a better idea
https://getbootstrap.com/docs/4.0/layout/media-object/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Media</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="media p-3">
<img src="https://i.imgur.com/v9f1nS2.jpg" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can use something like this
<style>
.align{
width:150px;
height:150px;
margin-left:20px;
margin-right:20px;
margin-bottom:20px;
}
<style>
In HTML use this
<a class="align"><img src="../img/bg.png" alt=""></a>
Use the grid system: https://jsfiddle.net/wwWaldi/3xy4woq7/13/
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="row">
<div class="col-1"></div>
<div class="col-4 text-right">
<img src="../img/bg.png" id="myImg" >
</div>
<div class="col-6">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
<div class="col-1"></div>
</div>
</div>
</div>
I've hard time installing RTL with Semantic UI, I used npm to insall semantic then edited the semantic.json file "rtl": false, to true
then followed this question (Existing Installation) but neved worked does semantic ui framework support rtl languages?
I also tried this with CDN https://rtlcss.com/cdn/css-frameworks/semantic-ui/index.html didn't work either!
What is the problem ?
semantic.json
permission": false,
"autoInstall": false,
"rtl": true,
"version": "2.3.3"
}
html
<!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>Homepage</title>
<!-- Semanti UI -->
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">
<!-- Semanti UI -->
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- nav -->
<div class="ui stackable menu">
<div class="item">
<img src="https://en.facebookbrand.com/wp-content/uploads/2016/05/flogo_rgb_hex-brc-site-250.png">
</div>
<a class="item">Features</a>
<a class="item">Testimonials</a>
<div class="right menu">
<a class="item ">Sign-in</a>
<a class="item ">Sign-up</a>
</div>
</div>
<!-- nav -->
<div class="commentsContainer">
<h2 class="ui center aligned icon header">
SMLE
</h2>
<div class="ui stacked segment">
<p> بسم الله الرحمن الرحيم
</p>
</div>
<div class="bu">
<div class="RorL">
<button class="ui blue right labeled icon button">
<i class="right arrow icon"></i>
التالي
</button>
</div>
<button class="ui blue left labeled icon button">
<i class="left arrow icon"></i>
السابق
</button>
</div>
<div class="ui small comments">
<h3 class="ui dividing header">Comments</h3>
<div class="comment">
<a class="avatar">
<img src="https://semantic-ui.com/images/avatar2/large/molly.png">
</a>
<div class="content">
<a class="author">Matt</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
How artistic!
</div>
<div class="actions">
<a class="reply"><span> 22</span> UpVote</a>
<a class="reply">DownVote</a>
<a class="reply">Reply</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="https://semantic-ui.com/images/avatar2/large/matthew.png">
</a>
<div class="content">
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This has been very useful for my research. Thanks as well!</p>
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
<div class="comments">
<div class="comment">
<a class="avatar">
<img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
</a>
<div class="content">
<a class="author">Jenny Hess</a>
<div class="metadata">
<span class="date">Just now</span>
</div>
<div class="text">
Elliot you are always so right :)
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
</a>
<div class="content">
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">5 days ago</span>
</div>
<div class="text">
Dude, this is awesome. Thanks so much
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
<!-- Comments -->
</div>
<!-- Semanti UI -->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>
<!-- Semanti UI -->
</body>
</html>
Fixed it , It's a simple mistake.
The code was missing this.
<html dir="rtl" lang="ar">
I am currently trying to use Bootstrap to get two columns: One width 1/3 size and one with 2/3 size.
What I have is a container, and in it a row:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
asfas asijnafninasifn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn
</div>
<div class="col-md-8">
<img id="Image-Maps-Com-image-maps-2017-08-25-161100-img" src="image.png" alt="" usemap="#image-maps-2017-08-25-161100" width="6460" height="3455" border="0" class="map" />
<map id="ImageMapsCom-image-maps-2017-08-25-161100" name="image-maps-2017-08-25-161100"></map>
</div>
</div>
</div>
So the expected result for me (in my understanding) would be 1/3 of the page with the text and linebreaks and 2/3 (on the right side) would be the image with the image-map on it.
But: the result is both underneath, so in one line there is this thex text (within col-md-4) and on the next line there is the image (within col-md-8). Where is the problem?
Info: My viewport is big enough and even changing is to xs doesn't change the result.
As written in your comments, this DOES work:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
asfas asijnafninasifn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn
</div>
<div class="col-md-8">
<img id="Image-Maps-Com-image-maps-2017-08-25-161100-img" src="https://upload.wikimedia.org/wikipedia/commons/3/33/Su%C3%ADno_alta.jpg" alt="" usemap="#image-maps-2017-08-25-161100" width="6460" height="3455" border="0" class="map" style="max-width: 100%; height: auto !important" />
<map id="ImageMapsCom-image-maps-2017-08-25-161100" name="image-maps-2017-08-25-161100"></map>
</div>
</div>
</div>
For small screen use col-sm-4 and col-xs-4 because col-md-4 taking 992px and up screen. One important thing for image, give img-reponsive class.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
asfas asijnafninasifn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn
</div>
<div class="col-md-8 col-sm-8 col-xs-8">
<img id="Image-Maps-Com-image-maps-2017-08-25-161100-img" src="https://dummyimage.com/600x200/000/fff&text=sample+image" alt="" usemap="#image-maps-2017-08-25-161100" border="0" class="map img-responsive" />
<map id="ImageMapsCom-image-maps-2017-08-25-161100" name="image-maps-2017-08-25-161100"></map>
</div>
</div>
</div>
Currently I have my website looking like this.
http://imgur.com/jS1vEKq
Here's the html
<html ng-app="app">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/opencv_css.css" />
</head>
<nav class="navbar navbar-default">
<div class="container"> <!-- top intro part -->
<div class="navbar-header">
<a class="navbar-brand" href="#/"> OPENCV 3.0.0</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
<body ng-controller="MainController">
<div class="row"> <!-- Dropdown menu -->
<div class="col-md-20">
<div id="main">
<form class="form-horizontal" role="form">
<label class="control-label col-md-2">Filter List:</label>
<div class="col-md-5">
<select class="form-control"
ng-model="template"
ng-options="t as t for t in templates">
</select>
</div>
</form>
</div>
</div>
<input type="file" id="fileToUpload" name="fileToUpload">
<button ng-click="add()">Upload</button>
</div>
<div class="row">
<div class="col-md-push-2 col-sm-push-1 col-lg-push-1 col-md-8-col-sm-8 col-lg-6 text-warning">
<div id="imagesData">
<img id="img1" src="" alt="" class="data-image" />
</div>
</div>
<div class="col-md-push-4 col-sm-push-2 col-lg-push-2 col-md-16-col-sm-16 text-warning">
<div id="imagesData">
<img id="img2" src="" alt="" class="data-image" />
</div>
</div>
</div>
<script src="js/jQuery.js"></script>
<script src="js/angular.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I was wondering how I would move image elements just a few pixels lower so that they aren't right against the upload button? And I know that the way I've placed the images in bootstrap must be completely wrong and awful. I'm still a noob to web dev so I simply looked at someone else's code and made it fit to my needs.
Try a < br> (Without Space) it will break one line ;)
I saw this answer was given already, sorry
You can add a margin to your .data-image class
.data-image {
margin: 10px 0px;
}
Well theres a few ways you could do this firstly (kinda cheaty) just use simple <br> tags like so...
<br><br> <--- right here
<div class="row">
<div class="col-md-push-2 col-sm-push-1 col-lg-push-1 col-md-8-col-sm-8 col-lg-6 text-warning">
<div id="imagesData">
<img id="img1" src="" alt="" class="data-image" />
</div>
</div>
<div class="col-md-push-4 col-sm-push-2 col-lg-push-2 col-md-16-col-sm-16 text-warning">
<div id="imagesData">
<img id="img2" src="" alt="" class="data-image" />
</div>
</div>
</div>
you can add it in before or after the row tag i think but try this
I'm having problems with validating this code with the W3 validator.
The problem is with the <form> tag.
I need the <form> tag to overlap several <div> and <span> tags because I have many different input fields and such, but I'm also using the Form2 and Form3 with input fields and such so I need to use </form> before the Form2. But this gives me problems when validating because it's overlapping <div> and <span> tags.
What can I do to make the validation work?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="sv" xml:lang="sv" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Title</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="headerwrapper">
<div class="header alignleft">
Home
</div>
<div class="header alignright">
<div id="searchfield">
Search
</div>
</div>
<div id="menu">
Menu
</div>
</div>
<div class="clear"></div>
<div class="content">
<div class="box alignleft">
<div class="boxtop"></div>
<div class="boxmiddle">
<form action="links.php" method="post"><input type="hidden" name="edit_page_check" value="yes" />
<p>
<span id="page_leftbox">Text</span>
</p>
</div>
<div class="boxbottom"></div>
</div>
<div class="column580 alignright">
<div class="header580">
<h2>Topic</h2><span class="headerdesc">Text</span>
</div>
<p>
<span id="page_info">Info</span>
</p>
</form>
<br/>
<div id="addlinkform" style="display: none;">
Form2
</div>
<div id="linkform" style="display: none;">
Form3
</div>
</div>
</div>
<div class="clear"></div>
<div class="divider800"></div>
<div id="footer">
Footer text
</div>
</div>
</body>
</html>
XHTML doesn't let you overlap tags. For example, this is invalid:
<div><form></div></form>
What you're going to want to do is, rather than trying to only encompass the items that you believe are in the form, encompass the <input /> tags that are in the form as well as their containers. For instance, your code should look like this instead:
<div class="content">
<form action="links.php" method="post"><input type="hidden" name="edit_page_check" value="yes" />
<div class="box alignleft">
<div class="boxtop"></div>
<div class="boxmiddle">
<p>
<span id="page_leftbox">Text</span>
</p>
</div>
<div class="boxbottom"></div>
</div>
<div class="column580 alignright">
<div class="header580">
<h2>Topic</h2><span class="headerdesc">Text</span>
</div>
<p>
<span id="page_info">Info</span>
</p>
<br/>
<div id="addlinkform" style="display: none;">
Form2
</div>
<div id="linkform" style="display: none;">
Form3
</div>
</div>
</form>
</div>
Notice how the form element spans ALL of the input tags' containers.
XML (XHTML in this case) needs to be well-formed. Take a look at this. You should be able to fix that problem by moving the <form>-tag up in the tree.
Instead of
<div>
<form action="/some_target" method="post">
<input/>
</div>
<div>
<input />
</form>
</div>
do the following (move the form element up, so that it wraps the inputs as well as their containers):
<form action="/some_target" method="post">
<div>
<input/>
</div>
<div>
<input />
</div>
</form>