I've got a single page of my website which I'm struggling to make responsive. It looks fine on normal screens but is very small and doesn't fill the whole screen on an iPhone. I've narrowed the issue down to this block of code:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="post-preview">
<h2 class="post-title">Blah</h2>
<p>Blah</p>
<hr>
</div>
</div>
<div class="col-md-6">
<div class="post-preview">
<h2 class="post-title">Blah</h2>
<p>Blah</p>
<hr>
</div>
</div>
<div class="col-md-5 col-md-offset-1">
<div class="post-preview">
<h2>Blah</h2>
<p class="post-title">Blog Post</p>
<p class="post-title">Blog Post</p>
<p class="post-title">Blog Post</p>
<hr>
</div>
</div>
</div>
</div>
I think I'm not using the grid system properly but would welcome any input!
My source is here: http://pastebin.com/JC6XzTMT and I'm using this as a base: http://ironsummitmedia.github.io/startbootstrap-clean-blog/
Thanks
Make sure the following meta tag is the head of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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 am using a Bootstrap v4.1.2.I am trying to use col-md-6 but on my pc >1300px width but it is not showing in two columns.But if i am using float:left it works
But otherwise it is showing in only one columns and blank another column (both in case of using container or container-fluid or nothing)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-6">
.....
</div>
<div class="col-6">
.....
</div>
</div>
</div>
Basing on Bootstrap 4 Documentation (https://getbootstrap.com/docs/4.0/layout/grid/) it should look like this :
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
</div>
The correct <link> to use Bootstrap 4.1.2 CSS is:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
Have you checked the browser console? Because you're not correctly linking it, the CSS could be getting blocked.
Working code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-6">
.....
</div>
<div class="col-6">
.....
</div>
</div>
</div>
I am not sure if this white space above the div is caused by a media query or by something in the twitter bootstrap css.
Here is the page at mid view: http://postimg.org/image/gq9dfuuah
Here is my markup for the top section of the page:
<div class="page-section intro">
<div class="container">
<div class="logo"><img src="../../images/logo-2.png" id="backdrop"></div>
<div class="intro_wrapper">
<div class="row">
<div class="col-md-6"><span class="pull-right">
<div class="mockup">
<img src="../../images/techandall_shadow_series_apple.png" id="backdrop">
</div>
</div></span>
<div class="col-md-6">
<span class="pull-right">
<div class="saying">Design, Development, Dedication</div>
<div class="left"><p class="lead center">We are highly experienced in Responsive Web Design, Database-driven websites, Content Management Systems, and Custom Web Applications.</p>
</div>
<div class="intro_buttons center-block">
<div class="center_button">
Get A Quote
</div>
</div>
</div></span>
</div>
</div><!-- feature_wrapper -->
</div><!--/.container-->
Actually i have designed the template for one of my games site. In the when i play the game iam getting some problem in IE9 but no issues with other browsers. For clear understanding the issue please see this
play page Code:
<div style="float:left">
<div class="gameContentsurround">
<div class="gameContentbg">
<div class="gameDiv">
<div align='center'>
<!--game content here-->
</div>
</div>
</div>
<div class="gameboxbelowheight"></div>
</div>
<div style='height:5px'></div>
<div style="clear:both"></div>
<div class="gameDesc">
<!--game description here-->
</div>
<div class="moregamesbg">
<div class="moregameswhitebg">
<!--more games section here-->
</div>
</div>
</div>
<div style="float:right; width:390px">
<!--right column where actual issue comes here in IE9-->
</div>
right_column code:
<div class="playAdsWhiteBg">
<div class='playAdsDiv'>
<center>
google ads
</center>
</div>
</div>
<div style="clear:both"></div>
<div style='height:2px'></div>
<!-- Ads END -->
<!-- Ads -->
<!--<div><?php echo SPONSORS_TITLE;?></div> -->
<div class="playAdsWhiteBg">
<div class='playAdsDiv'>
<center>
google ads
</center>
</div>
</div>
<div style="clear:both"></div>
<div style='height:2px'></div>
<!-- Ads END -->
<!-- Comments Section -->
<div class="playAdsWhiteBg">
<div class='playAdsDiv'>
<div style="overflow:scroll">
fb comments
</div>
</div>
</div>
<div style="clear:both"></div>
<div style='height:2px'></div>
<!-- Rating Section -->
<div class="ratethisgameWhiteBg">
<div class='ratethisgameDiv'>
rating system
</div>
</div>
Add width: 390px to content's first child.
When you use floating elements you should always set their width
I'm trying to create a home page screen where the buttons in the body take up the full screen after the header and footer. Ideally the buttons 2x2 will stretch out to the remaining space on the screen.
I tried using ui-grid-a to stretch the buttons to the width of the screen but was unable to alter the height to the screensize.
<section id="Home" data-role="page">
<header data-role="header">
Home
<h1>testapp</h1>
Setup
</header>
<div data-role="content">
<fieldset class="ui-grid-a">
<div class="ui-block-a">button1</div>
<div class="ui-block-b">button2</div>
<div class="ui-block-a">button3</div>
<div class="ui-block-b">button4</div>
</fieldset>
</div>
<footer data-role="footer" data-role="footer" data-position="fixed">
<fieldset class="ui-grid-a">
<div class="ui-block-a"style="text-align:left">button1</div>
<div class="ui-block-b"style="text-align:right">button2</div>
</fieldset>
</footer>
I'm a noobie at coding so any help would be appreciated. Thanks in advanced.
I believe this is what your looking for. http://jsfiddle.net/codaniel/JAjJp/1/embedded/result/
CSS
<style>
.button{padding:25% 0;}
</style>
HTML
<section id="Home" data-role="page">
<header data-role="header">
Home
<h1>testapp</h1>
Setup
</header>
<div data-role="content">
<fieldset class="ui-grid-a">
<div class="ui-block-a">button1</div>
<div class="ui-block-b">button2</div>
<div class="ui-block-a">button3</div>
<div class="ui-block-b">button4</div>
</fieldset>
</div>
<footer data-role="footer" data-role="footer" data-position="fixed">
<fieldset class="ui-grid-a">
<div class="ui-block-a"style="text-align:left">button1</div>
<div class="ui-block-b"style="text-align:right">button2</div>
</fieldset>
</footer>
</section>
Does this work:
http://jsfiddle.net/Pq9YP/
Using a navbar with one list item