I would the image on desktop to stay the same, but on mobile to be bigger on height. What should i change in the code ? I'm using Bootstrap 5 aswell.
<div class="container">
<div class="row">
<div class="col-12">
<img src="/images/section1/home-image.jpg" class="img-fluid" id="img1" alt="man on boat">
<img src="/images/section1/home-logo.png" class="img-fluid" id="img2" alt="logo Seafarer">
</div>
</div>
</div>
#section1 {
position:relative;
}
#img2 {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Here you go...
I think this is impossible to achieve with Bootstrap. I would use #media query if I were you.
Add this to your CSS:
#media only screen and (max-width: 575px) {
.col-12 {
height: 500px; // Adjust the height
}
#img1 {
object-fit: cover;
height: 100%;
}
}
It's important to add object-fit: cover; otherwise your image will be screwed. Try to remove this line to see what I'm talking about.
Let me know if this is helpful.
I'm following this w3schools.com tutorial to create a toggle switch...
https://www.w3schools.com/howto/howto_css_switch.asp
But for some reason its very hard to press and doesn't work properly on IOS. Any ideas? I tried doing some googleing on it, but I couldn't find anything on it.
Here is the code...
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
I solved it by doing this...
<div id="SwitchDiv" onclick="if ($('#SwitchInput').attr('checked')) {$('#SwitchInput').attr('checked', false);} else {$('#SwitchInput').attr('checked', true);}">
<label id="Switch" class="switch" style="pointer-events: none;">
<input style="pointer-events: none;" id="SwitchInput" onchange="ClickAlertsCheckbox(this)" type="checkbox" checked>
<span style="pointer-events: none;" class="slider round"></span>
</label>
</div>
I know there seems to be a lot out there about this, but none of the solutions seem to fix my issue.
I am trying to apply a fixed button to the bottom of my screen within an iframe. With my current implementation, I am experiencing a terrible flicker with the button on iOS Safari whenever I scroll.
Here's essentially what I have:
HTML
<iframe>
<body>
<div class="app">
<div class="app-content">
<div class="card">
<h1>Header</h1>
<p>Content</p>
</div>
<button class="fixed-button">This is flickering</button>
</div>
</div>
</body>
</iframe>
CSS
iframe {
border: none;
position: absolute;
height: 100%;
width: 100%;
top: 0; left: 0;
}
app {
-webkit-overflow-scrolling: touch;
overflow:auto;
position:absolute;
width:100%;
height:100%;
}
fixed-button {
position: fixed;
bottom: 1rem;
}
I've got a WIP on my site here http://jaredrauh.com/iframe-fixed-elements-ios/. Any suggestions would be amazing.
I am using a standard bootstrap 3 navbar and I am trying to align the text of the menu options to be on the same horizontal level as the text and the pictures in the footer.
Basically on the left side I want the first letter of the menu item "Home" to be vertically aligned with the first letter of the footer, which is the item "Impressum".
On the right side I want the image of the footer to be aligned to the last item of the menu, which is contact.
Any help would be highly appreciated.
here is my code:
<nav id="navbar-primary" class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#navbar-primary-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>COLLECTION</li>
<li>ONLINE SHOP</li>
<li>ABOUT US</li>
<li>CONTACT</li>
</ul>
</div><!-- /.navbar-collapse -->
<hr>
</div><!-- /.container-fluid -->
</nav>
<!-- Footer -->
<div id="footer">
<div class="row">
<hr>
<div class="col-lg-6 col-lg-offset-1 col-xs-6">
IMPRESSUM |
INFO |
PRESSE </p>
</div>
<div class="col-lg-1 col-xs-2">
<img src="img/pinterest.png" alt="" class="img-responsive"> </div>
<div class="col-lg-1 col-xs-2">
<img src="img/instagram.png" alt="" class="img-responsive"> </div>
<div class="col-lg-1 col-xs-2">
<img src="img/facebook.png" alt="" class="img-responsive"> </div>
</div>
<!-- /.row -->
</div>
And here is my CSS:
#navbar-primary.navbar-default {
background: transparent;
border: none;
}
#navbar-primary.navbar-default .navbar-nav {
width: 100%;
text-align: center;
}
#navbar-primary.navbar-default .navbar-nav > li {
display: inline-block;
float: none;
}
#navbar-primary.navbar-default .navbar-nav > li > a {
color: rgba(77, 77, 77, 1);
background-color: rgba(248, 248, 248, 0);
padding-left: 50px;
padding-right: 50px;
padding-top: 5px;
padding-bottom: 5px;
}
#navbar-primary.navbar-default .navbar-nav>li>a:hover,
#navbar-primary.navbar-default .navbar-nav>li>a:focus {
color: rgba(151, 211, 210, 1);
background-color: rgba(255, 255, 255, 1);
}
#navbar-primary.navbar-default .navbar-nav>.active>a,
#navbar-primary.navbar-default .navbar-nav>.active>a:hover,
#navbar-primary.navbar-default .navbar-nav>.active>a:focus {
color: rgba(151, 211, 210, 1);
background-color: rgba(255, 255, 255, 1);
https://jsfiddle.net/DTcHh/9901/
I think you should set your css according to your layout, So far i made some alteration in your css check this code
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
#navbar-primary.navbar-default {
background: transparent;
border: none;
}
#navbar-primary.navbar-default .navbar-nav {
width:100%;
text-align: center;
}
#navbar-primary.navbar-default .navbar-nav > li {
display: block;
float: left;
}
#navbar-primary.navbar-default .navbar-nav > li > a {
color: rgba(77, 77, 77, 1);
background-color: rgba(248, 248, 248, 0);
padding-left: 50px;
padding-right: 48px;
width:15px;
}
#navbar-primary.navbar-default .navbar-nav>li>a:hover,
#navbar-primary.navbar-default .navbar-nav>li>a:focus {
color: rgba(151, 211, 210, 1);
background-color: rgba(255, 255, 255, 1);
}
#navbar-primary.navbar-default .navbar-nav>.active>a,
#navbar-primary.navbar-default .navbar-nav>.active>a:hover,
#navbar-primary.navbar-default .navbar-nav>.active>a:focus {
color: rgba(151, 211, 210, 1);
background-color: rgba(255, 255, 255, 1);
Page A has an iframe (that loads Page B). That Page B has a div#OutputDiv. My goal is to make that div in that iframe scrollable.
SOLUTION (CREDIT TO STEVE!):
Include overflow: auto for that div. However you must specify height too. Simply give any fixed value. eg height: 0.
Use a javascript function to make the div's height always same as the window's, even after window resize. height is now not fixed.
Code:
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
overflow: auto;
overflow-x: hidden; (optional)
-webkit-overflow-scrolling: touch; (enable smooth scrolling on mobile)
height: 0; (omit-able)
}
$(window).resize(function(){
$("#outputDiv").css("height",0).css("height",$(this).height());
});
$(window).trigger("resize");
TL;DR Full story
Page A.html - has an iframe to load Page B. When on Page A, that div#OutputDiv in that iframe must be scrollable. Works fine on PC but not scrollable on iPad/Android. Page structure:
Page B.php - Left half div#OutputDiv, right half div#map-canvas containing Google Maps.
(Sidenote: I think the #map-canvas CSS is pretty unchangeable, for example changing something may cause the Maps to extend height beyond browser height, which is not what I want.)
Page A.html
<style type="text/css">
#title-banner {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#real-time-alert {
margin-top: 155px;
margin-left: 10px;
}
.tab-content {
border-left: 1px solid #ddd;
padding: 10px;
height: 100%;
}
#map {
height: 100%;
}
.nav-tabs {
margin-bottom: 0;
}
#panel {
position: fixed;
top: 120px;
right: 10px;
bottom: 10px;
left: 350px;
}
iframe {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="title-banner" class="well"><h1>Real-time incident updates</h1></div>
<div id="real-time-alert">
DEMO:<br>
<a id="demolink" style="cursor: pointer; font-weight: bold;">22/11/2013, 0.32.18AM: 3.128268, 101.650656<br></a>
</div>
<div id="panel">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#map">Map</a></li>
<li><a data-toggle="tab" href="#message">Messages</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="map"><iframe seamless name="map-report"></iframe></div>
<div class="tab-pane" id="message"></div>
</div>
</div>
</body>
Page B.php
*for div#map-canvas, I had to do the code below, or else when I hover on the page, div#OutputDiv will disappear. This may be not important.
$("*").hover(function(){
$("#map-canvas").css("position","fixed"); });
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
width: 50%;
}
#content-pane {
float:left;
width:48%;
padding-left: 2%;
}
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
}
</style>
<body>
<div id="content-pane">
<div class='well well-small' id="inputs" style="margin: 1em 1em 0 0">
<b>TESTING ONLY</b> <br>
<label for="originLat">Incident Site: </label><input type="text" id="originLat" style="width:6em;" />
<input type="text" id="originLng" style="width:6em;" />
<button type="button">Calculate distances</button>
</br>eg. 3.126547,101.657825
</div>
<div id="outputDiv"></div>
</div>
<div id="map-canvas" style="position: fixed; right: 1px;"></div>
</body>
I can't see any overflow controls specified in the CSS (apologies if I missed them).
Have you tried:
div#OutputDiv { overflow: auto; height: 200px; }
The height is just for testing purposes - but you could use Javascript to get the actual height and apply it using either raw javascript or jQuery.
A good example (including how to detect orientation changes if device goes portrait to landscape or similar) can be found on:
How do I get the new dimensions of an element *after* it resizes due to a screen orientation change?