As it says in the title, a row on my site is not containing its elements properly when the site loads on my iPhone. It works in Firefox, Chrome, and Safari desktop when I change the viewport width, and when I test it in dev tools.
Here's a screenshot of the issue:
Here's a link to the site: www.appepic.com
This is the first time I've built a website using Bootstrap, so I apologize if I missed something simple.
Thank you! Here's the html for reference as well:
<div class="row" id="clients">
<div class="container">
<div class="col-xs-12">
<h2 class="heading text-uppercase">Brands That Trust AppEpic</h2>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img src="http://appepic.com/wp-content/uploads/2016/06/Microsoft_logo-200.png" class="center-block brand" id="microsoft">
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img src="http://appepic.com/wp-content/uploads/2016/06/Amazon-logo-200.png" class="center-block brand" id="amazon">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img src="http://appepic.com/wp-content/uploads/2016/06/semanoor-logo.png" class="center-block brand" id="semanoor">
</div>
</div>
<!--Anchors for same site linking-->
<a name="youthability-test"></a>
<a name="feedback-panel-test"></a>
<!--End anchors-->
</div>
the .container div should be outside (parent) of the .row div
Related
my html code in here, in chrome and firefox, everything in OK but in Internet Explorer header style has been messed up.
I thought this is because of mdb-navbar, but I don't know the source of my problem
<mdb-navbar SideClass="navbar navbar-expand-lg header-card grey lighten-4 navbar-light mb-4"
[containerInside]="false">
<mdb-navbar-brand>
<div class="row">
<div class="col-md-5 user-info col-sm-12">
<div class="data-column user-name">
<app-text-block [Title]='"user "' [info]="currentUserName"></app-text-block>
</div>
</div>
<div class="col-md-7 medicalcenter-info col-sm-12 hidden-phone">
<div class="col-12 data-column">
<app-text-block [Title]='"med kind"' [info]="medicalCenter?.MedicalCenterKind.Caption"></app-text-block>
</div>
<div class="col-12 data-column">
<app-text-block [Title]='"med name"' [info]="consumerCorp?.Title"></app-text-block>
</div>
<div class="col-12 datetime">
<span>
{{todayJalali}}
</span>
<span>
{{timeNow}}
</span>
</div>
</div>
</div>
</mdb-navbar-brand>
</mdb-navbar>
Get it display as a block and try.
You can easily do it using css properties Add "display:block" to your declaration.
I'm using Bootstrap Twitter and I've an issue there :
<body>
<div class="container col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2 main-progress-bar-container" style="margin-top: 50px;">
<div class="progress sm-progress-bar active">
<div class="progress-bar" id="main-progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="margin-bottom:30px;">
<!-- value here -->
</div>
</div>
</div>
<!-- Page content -->
<div class="container col-xs-12 col-sm-12 col-md-12 col-lg-12 main-container">
<!--Left Part (2/3)-->
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8" id="left-part">
<div class="part-content" id="left-part-content">
</div>
</div>
<!--Right Part (1/3)-->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" id="right-part">
<div class="part-content" id="right-part-content">
<div id="clock-container">
</div>
</div>
</div>
</div>
But when I update my code like this :
<!-- Page content -->
<div class="container col-xs-12 col-sm-12 col-md-12 col-lg-12 main-container">
<!--Left Part (2/3)-->
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8" id="left-part">
<div class="part-content" id="left-part-content">
</div>
</div>
<!--Right Part (1/3)-->
<div class="col-xs-0 col-sm-0 col-md-4 col-lg-4" id="right-part">
<div class="part-content" id="right-part-content">
<div id="clock-container">
</div>
</div>
</div>
</div>
or like this :
<!-- Page content -->
<div class="container col-xs-12 col-sm-12 col-md-12 col-lg-12 main-container">
<!--Left Part (2/3) TEST-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="left-part">
<div class="part-content" id="left-part-content">
</div>
</div>
<!--Right Part REMOVED -->
</div>
Nothing change.. And when I'm looking at my source code in my browser, the code is not updated. On the server, the code is updated. I've the same trouble in local.. then I don't understand. I've tried with another browser, to clear the cache, history, to change the path, etc. Nothing change. It has been updated only when I've removed the whole div main container, then I've nothing to displayed unless my progressbar (as expected).
That's stange. There's someone able to explain me what I've missed ? I'm pretty sure it's a begginer mistake. Thanks.
Edit : I'm starting to belive in ghosts
The classes you are deleting are related to the responsiveness of the site. If the screen size changes, or if the device changes, they would perform the update of the site to fit the screen.
You could also, post a picture of what you see, it can help us to understand what it looks like.
Another thing, you have no content inside your divs, so the website won't show anything if the css is empty or so.
As you have deleted the right part, the div is aligned in such a way. It's the Bootstrap feature
What I am telling is possibility. There might be something else also.
If your code is not being changed by all those efforts then only thing that can control your HTML code is Java Script. It can control your HTML DOM.
Any of your JavaScript function might be reconstructing or editing your HTML code.
Hope this helps.
I'm having trouble with the bootstrap grid system. The div below <div class="col-xs-12 col-md-4"> should be on the right side while the other divs are on the left. Currently the first two column divs are correct and rendering at the top, but then the third column div doesn't render until the bottom of the image rather than alongside it. I need them to display correctly, what can I do?
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-7">
<h1>WELCOME TO YOUR NETWORK PROGRAM WEBSITE</h1>
</div>
<div class="col-xs-12 col-md-4">
<img src="images/tie.png">
</div>
<div class="col-xs-12 col-md-7">
<div class="loginText">
Get information about your Connect plan
<br><br>
If you have any problems logging in, please contact your account manager for help.
<br><br>
</div>
</div> <!-- cols -->
</div> <!-- row -->
</div> <!-- container -->
It looks like this
The third div needs to be moved up under the first div, but it's currently below the height of the second div.
Bootstrap's framework is build on a 12 column layout.
So
col-md-7 + col-md-4 + col-md-7 = 18 columns exceeding the 12 column limit, hence pushing the third div to the next line.
You can fix it by changing the col-md's to col-md-5 + col-md-2 + col-md-5 like this:
<div class="row">
<div class="col-xs-12 col-md-5">
<h1>WELCOME TO YOUR NETWORK PROGRAM WEBSITE</h1>
</div>
<div class="col-xs-12 col-md-2">
<img src="images/tie.png">
</div>
<div class="col-xs-12 col-md-5">
<div class="loginText">Get information about your Connect plan<br><br>If you have any problems logging in, please contact your account manager for help.<br><br>
</div>
</div> <!-- cols -->
</div>
Your question isn't very clear but from what I understand, col-md-7 plus col-md-4 plus col-md-7 equal 18, 6 more than the allotted 12. So it will go onto the next line.
The bootstrap grid system always adds to 12 in a row. you have md-7 and md-4 that's only 11.
you need to change
<div class="col-xs-12 col-md-4">
to
<div class="col-xs-12 col-md-5">
now you have 7+5 =12.
So, according to your updated question, you want the text on the left and the image on the right. You can do that as follows:
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row">
<div class="col-xs-12">
<h1>WELCOME TO YOUR NETWORK PROGRAM WEBSITE</h1>
</div>
<!-- div below is hidden in xs -->
<div class="col-md-12 hidden-xs">
<div class="loginText">Get information about your Connect plan<br><br>If you have any problems logging in, please contact your account manager for help.<br><br>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<img src="images/tie.png">
</div>
<!-- div below is shown only in xs -->
<div class="col-md-12 visible-xs">
<div class="loginText">Get information about your Connect plan<br><br>If you have any problems logging in, please contact your account manager for help.<br><br>
</div>
</div>
</div>
I'm working on my own project.My menu have 6 buttons.
I did it with Bootstrap but when i open in Iphone web browser, the menu comes one row - one button.
I want to show two buttons for a row.
Maybe i can't explain my problem, so i added a screenshot.
here is the image;
1
Thanks for everything,
here is my code below;
<div class="box first">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="center">
<a href="orders.php"><img src="img/logo/siparis.png" width="78px" height="78px">
<h4 style="text-align:center">Sipariş takibi</h4></a>
</div>
</div>
<!--/.col-md-4-->
<div class="col-md-4 col-sm-6">
<a href="http://www.example.com/example-sifre-yenileme.html">
<div class="center">
<img src="img/logo/email_unut.png" width="78px" height="78px">
<h4 style="text-align:center">Şifre değiştirme</h4></a>
</div>
</div>
<!--/.col-md-4-->
<div class="col-md-4 col-sm-6">
<div class="center">
<a href="orderhasar.php"> <img src="img/logo/hasar.png" width="78px" height="78px">
<h4 style="text-align:center">Hasarlı sipariş destek talebi</h4></a>
</div>
</div>
<!--/.col-md-4-->
</div>
<!--/.row-->
</div>
You mean you want all the menu items to show side by side horizontally?
If so, you need to add a XS class declaration for mobile:
<div class="col-md-4 col-sm-6 col-xs-2">
With col-xs-2, it will fit 6 items in a row (12 total columns, 2 columns per menu item, 6 menu items).
You might have to play with the size of the items then!
EDIT:
To show a 2 button row, add col-xs-6 instead.
<div class="col-md-4 col-sm-6 col-xs-6">
I'm building a website using Bootstrap 3.
Part of this site are 4 div-containers:
<div class="container">
<div id="content" class="row">
<div class="col-sm-4 col-md-3" style="background-color:#00F; color:#FFF">
Menu
</div>
<div class="col-sm-12 col-md-3 col-md-push-6 " style="background-color:#F00;">
<div class="row">
<div class="visible-md visible-lg col-md-12" style="background-color:#F08;">
Mod_1
</div>
<div class="col-md-12" style="background-color:#F80;">
Mod_2
</div>
</div>
</div>
<div class="col-sm-8 col-md-6 col-md-pull-3" style="background-color:#0F0;">
Main content goes here
</div>
</div>
</div>
Layout-View is shown here:
Code on Fiddler
"Mod_1" is only visible in the desktop view like expected. "Mod_2" should move above the Menu and Main container in the tablet view, but I can't find a way to place the container on top of both of them.
I already tried to use the col-sm-[colnumber]-push and -pull classes. But I didn't get the right results.