I'm using the Bulma grid framework to customize part of the interface for our Learning Management System. I have a simple vertical nav (1 column on larger screens) on the left and then there is a large promo banner in the middle (8 columns wide on larger screens) with a smaller promo banner to the right (3 columns wide on larger screens). I have it setup so that all three items show on desktop-sized screens, and then at slightly smaller breakpoints I have it so that only the nav and the large promo show, and then on mobile I have it so that only the nav shows.
The issue I'm having is that I can't get the height of the smaller promo banner on the right to match that of the main promo. I've tried adjusting the dimensions of the image placeholder so that it's not square (like it currently is) and no matter what I do it's either slightly shorter or slightly taller than the main promo. I need them to be the same height when both are in view.
Originally I had it setup so that the images stayed a static size and were just "cropped" as they shifted using
object-fit:cover;
but that doesn't work IE11 which unfortunately is a requirement (and is also not ideal since these images will be promo banners and parts would be getting cut off)....so that's why I'm trying to figure this way out to have them resize appropriately.
Here is a JSFiddle so you can see what I mean: http://jsfiddle.net/markb088/zpfbc7y3/5/
Here's the code from the JSFiddle in-case it becomes unavailable:
html{
overflow-y: hidden !important;
}
body{
overflow-x: hidden;
background-color:#f3f3f3;
}
a.navLink{
position:absolute;
width:100%;
height:90%;
top:0px;
right:0px;
text-decoration:none;
z-index:10;
background-color:white;
opacity:0;
filter:alpha(opacity=0);
}
.menuContainer{
background-color: white;
border: 3px solid #d9d9d9;
/*height: 350px;*/
font-size: 0.8em;
font-weight: bold;
line-height:1.2;
}
#media only screen and (max-width:768px){
.columns{
margin-left: 0.5rem;
margin-right: 0.5rem;
}
}
.respImg{
/* height:350px;*/
width:100%;
/*object-fit: cover;*/
}
.imgHolder{
position:relative;
overflow:hidden;
}
.navItem1, .navItem2, .navItem3{
position:relative;
/* height:110px;*/
padding-top:10px;
}
#media only screen and (max-width:631px){
.regQuickNav{
display:none;
}
.menuContainer{
height: 125px;
}
}
#media only screen and (min-width:632px){
.mobileQuickNav{
display:none;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet"/>
<body>
<div class="columns" style="margin-left: 2rem; margin-right: 2rem; margin-top: 6px;">
<div class="column is-1-fullhd is-1-widescreen is-1-desktop is-2-tablet is-12-mobile is-flex-desktop-only is-flex-tablet-only">
<div class="menuContainer">
<div class="mobileQuickNav">
<div class="columns is-mobile " style="margin: 0 0 0 0;">
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/3COCw5x.png" alt="" width="100" height="70" />
<p style="text-align: center;">My Plan</p>
<a class="navLink" href="#">My Plan</a></div>
</div>
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/YWTV4pn.png" alt="" width="100" height="70" />
<p style="text-align: center;">Browse Courses</p>
<a class="navLink" href="#">Browse Courses</a></div>
</div>
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/L07pkyt.png" alt="" width="100" height="70" />
<p style="text-align: center;">Events Calendar</p>
<a class="navLink" href="#">Events Calendar</a></div>
</div>
</div>
</div>
<div class="regQuickNav">
<div class="columns" style="margin: 0 0 0 0;">
<div class="column is-full">
<div class="navItem1"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/3COCw5x.png" alt="" width="100" height="70" />
<p style="text-align: center;">My Plan</p>
<a class="navLink" href="#">My Plan</a></div>
<div class="navItem2"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/YWTV4pn.png" alt="" width="100" height="70" />
<p style="text-align: center;">Browse Courses</p>
<a class="navLink" href="#">Browse Courses</a></div>
<div class="navItem3"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/L07pkyt.png" alt="" width="100" height="70" />
<p style="text-align: center;">Events Calendar</p>
<a class="navLink" href="#">Events Calendar</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="column is-8-fullhd column is-8-widescreen is-11-desktop is-10-tablet is-10-mobile is-hidden-mobile">
<div style="background-color: blue; overflow: hidden; position: relative;"><img class="respImg" src="https://i.imgur.com/GH2QEuJ.png" /></div>
</div>
<div class="column is-3-fullhd column is-3-widescreen is-hidden-tablet-only is-hidden-desktop-only is-hidden-mobile">
<div style="background-color: red; overflow: hidden; position: relative; border: solid 1px #999999;"><img class="respImg" src="https://i.imgur.com/jqbRA3S.png" /></div>
</div>
</div>
</body>
*Note that you'll need to expand the results panel and your browser wide enough so that the smaller promo banner shows. Majority of the CSS is included in the head tags of the html, due to the restrictions of the LMS.
I'm not overly familiar with grid systems, so not sure if I'm missing something to make it show with a matching height but still be responsive.
Thanks!
If you have the option to add the image as a background, you can use the following CSS:
.column {
background-size:cover;
}
It will also work with IE11.
The other option which will distort your image aspect ratio is to set a min-height value to the image:
.respImg {
min-height: 300px;
}
Related
Hi, I have a problem with responsive. When it's responsive mode I need 4 icons in single line. Same like web mode. Please help. I added code in image.
<ul class="nav nav-tabs first">
<li class="active" style="padding-right: 15px;">
<a href="#Mala" data-toggle="tab">
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/Malaicon.png" alt="" width="144" height="144">
<br>Mala Connect</a></li>
<li style="padding-right: 15px;">
<a href="#LaalsaApp" data-toggle="tab">
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/laalsaappicon.png" alt="" width="144" height="144">
<br>Laalsa App</a></li>
</ul>
<li style="padding-right: 15px;">
<a href="#Toran" data-toggle="tab">
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/toranicon.png" alt="" width="144" height="144">
<br>Toran</a></li>
</ul>
<li style="padding-right: 15px;">
<a href="#Web" data-toggle="tab">
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/webicon.png" alt="" width="144" height="144">
<br>Web</a></li>
</ul>
You need to add #media css. Try this
#media screen and (max-width: 767px){
.icons-parent-elements-class{
display:inline-block;
width:25%;
float:left;
}
}
To achieve that you have to change the width of each element to the number of elements divided by 100%. for example:
#media (min-width: 750px){
.icons-parent-elements-class {
width: 25%;
display: inline-block;
float: left;
}
}
HTML:-
<div class="container">
<div class="div1">
<img src="pathnameofimage.png">
</div>
<div class="div2">
<img src="pathnameofimage.png">
</div>
<div class="div3">
<img src="pathnameofimage.png">
</div>
for mobile screens use
CSS:-
#media(max-width: 767px){
.container{
display:flex;
justify-content:center;
flex-direction:column;
}
}
#media(max-width: 767px){
.nav-tabs.first li {
width: 25%;
margin: 0;
float: left;
padding-right: 8px !important;
}
.nav-tabs.first li a img {
width: 100%;
max-width: 80px !important;
height: auto!important;
margin: 0 auto;
display: inline-block;
}
}
please try it. if don't work then please share your code. and also remove the height and width form the image tag. these are creating problem in the responsive view.
Hi community and thanks in advance for your help.
My problem is following, I would like to display some images while on computer screen but switch those images to only one composite image on mobile devices. Here is the code I have:
#media screen and (max-width:480px) {
.hidden_mobile {
display:none;
background-image: url("http://julienleveau.com/wp-content/uploads/2018/04/Mobile-version.jpg");
background-repeat: no-repeat;
background-size: contain;
}
}
<div class="col-sm-1">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/top100.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/WW-1.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/fearless.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/bowp-300-1.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/ispwp.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
</div>
<div class="col-sm-1">
</div>
So far it works on computer but on mobile it doesn't. It just displays the images on top of each others.
Thank you
You have 2 problems here:
1) The elements that you are trying to hide in mobile have an inline display:block that overrides the display:none in your stylesheet. That's why you keep seeing the images in mobile. In the running snippet below, I removed all the inline styles, and moved the margins to a class in the stylesheet.
You can read more about CSS rule specificity here: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
2) Even if you delete the inline styles, you wouldn't see the background image you want, because you added it to an element that had display:none. You need to add that background image to a different element, which I created in the div with class .mobile_only.
With these 2 changes, applied in the snippet below, you can see the different images depending on the resolution of your screen.
.hidden_mobile {
height: auto; width: 100%; margin: 0 auto 15px;
}
#media screen and (max-width:480px) {
.hidden_mobile {
display: none;
}
.mobile_only {
height: 250px;
background-image: url("http://julienleveau.com/wp-content/uploads/2018/04/Mobile-version.jpg");
background-repeat: no-repeat;
background-size: contain;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/top100.jpg" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/WW-1.jpg" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/fearless.jpg" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/bowp-300-1.jpg" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/ispwp.jpg" alt="">
</div>
</div>
<div class="col-sm-1">
</div>
<div class="mobile_only"></div>
</div>
I been trying to make a page with four responsive images in it arranged in blocks.
Like two images on first row and two on second row.
And since responsive i tried to make them shrink while staying at their places.
But it kinda juggles all around while i try to resize the window.
<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/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#image1 {
position:relative;
float: left;
padding-left: 10px;
margin-left:250px;
border:1px solid;
}
#image2 {
position:relative;
float: left;
padding-left: 10px;
margin-left:300px;
border:1px solid;
padding-bottom:10px;
}
#image3 {
position:relative;
float: left;
margin-left:250px;
padding-top:10px;
border:1px solid;
}
#image4 {
position:relative;
float: left;
padding-top:10px;
padding-left: 10px;
margin-left:300px;
border:1px solid;
}
<div class="container">
<h2>Image</h2>
<p>This text is responsive too</p>
<img class="img-responsive" src="img.png" id="image1" alt="Chania" width="150" height="150">
<img class="img-responsive" src="img.png" id="image2" alt="Chania" width="150" height="150">
<img class="img-responsive" src="img.png" id="image3" alt="Chania" width="150" height="150">
<img class="img-responsive" src="img.png" id="image4" alt="Chania" width="150" height="150">
</div>
Any suggestion is greatly appreciated..
First off. I see you are using bootstrap. Make sure you are utilizing the built in grid layout system. Your container won't be used unless you set rows and columns. That will handle most of your responsive behaviour.
Then you need to set two images in a row.
Not sure why you'd set the images position. Unless you are making the images reach outside the container you really don't need to utilize the positions.
If you do need the position. Then the parent will have the relative property. The child you want to move will be set to absolute. Google mdn position for more info on the properties. Note: if you don't set the position of the child to absolute, then that element will remain in the normal flow and ignore the relative parent.
Something like this might get you headed in the right direction:
<style>
parent-div {
position: relative;
}
child-image {
position: absolute;
left: 0;
top: 0;
}
child-text {
position: absolute;
bottom: 10px;
left: 0;
z-index: 10; /*set text above image*/
}
img {
width: 100%; /* fill to parent */
}
</style>
<body class="container-fluid">
<div class="row">
<div class="col-md-6 parent-div">
<p class="child-text">This text is responsive too</p>
<img class="child-image" href="" alt="">
</div>
<div class="col-md-6 parent-div">
<img class="child-image" href="" alt="">
</div>
</div><!-- End of row -->
<div class="row">
<div class="col-md-6 parent-div">
<p>This text is responsive too</p>
<img class="child-image" href="" alt="">
</div>
<div class="col-md-6 parent-div">
<img class="child-image" href="" alt="">
</div>
</div><!-- End of row -->
</body><!-- End of page -->
I'm new to html/css and I'm trying to do an adaptive header for the website. I'm using padding-right with 5% for divs, but las div always goes to a new line and the parent div don't want to expand. I want parent div expand depending on the text in child divs. Also when I'm using padding in px, all works properly, but it loses adaptive part.
What am I doing wrong?
With padding in percents
With padding in pixels
HTML and CSS
button{
height:34px;
width:100%;
font-weight:bold;
border:none;
background-color:#fc592d;
color:#ffeded;
border-radius:4px;
}
<div style="width: 100%; background-color: rgb(44, 62, 80); float: left;">
<div style="width: 47.36%; height: auto; margin: auto;">
<div style="display: inline-block; float: left; padding-bottom: 4%; padding-top: 4%;">
<div style="display:inline-block; padding-right:5%;">
<img src="images/icon1.png" alt="farkops">
<a class="href" href="#">One thing</a>
</div>
<div style="display:inline-block; padding-right:5%;">
<img src="images/icon2.png" alt="pricep">
<a class="href" href="#">Second</a>
</div>
<div style="display:inline-block; padding-right:5%;">
<img class="href" src="images/icon3.png" alt="otzivi">
<a class="href" href="#">Three</a>
</div>
<div style="display:inline-block;">
<img src="images/icon4.png" alt="works">
<a class="href" href="#">Fourth thing</a>
</div>
</div>
<div style="float: left; display: inline-block; margin-top: 1.24%; margin-left: 2%;">
<div style="">
<p style="margin: 0px; padding-bottom: 8px; font-weight: bold; font-size: 3vh;"><span>7 (905)</span> 639-29-03</p>
</div>
<div style="">
<button>Call</button>
</div>
</div>
</div>
</div>
UPD1:
When I add one new div, the previous one fits just right (the parent div expands as I want), but the new one goes to new line.
I'm trying to create two side by side divs in a wrapper. The first div, #content, is a position:relative div.
#wrapper {
background-image: url(assets/images/BG2.gif);
margin-right: auto;
margin-left: auto;
width: 996px;
overflow: auto;
}
#content {
position: relative;
top: 10px;
left: 10px;
width: 745px;
background-color: red;
}
#important {
float: right;
position: relative;
top: -1120px;
width: 231px;
margin-right: 10px;
background-color: green;
}
The problem is that the second div, #important, is displayed under the first one. There is enough space for both divs and the padding/margins. I can make it work by floating it to the right and using a negative top position and it displays fine, but I feel as though there is a better/correct way of doing this.
HTML:
<div id="wrapper">
<div id="content">
<img src="assets/photos/bid day 046.jpg" alt="Bid Day" width="745" height="311" />
<div id="fraternity">
<p align="center"><span class="style5"><strong>TITLE</strong><br />
Subtitle<br />
Sub-subtitle</span></p>
<p align="justify">depry derp</p>
<p align="justify">derp derp derp</p>
<p class="style5" align="center"><br/><strong>Title<br/>
Twitter Feed</strong></p>
<div id="twitter">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>...</script>
</div>
</div>
<div class="fb-like-box" data-href="something" data-width="292" data-colorscheme="dark" data-show-faces="false" data-stream="true" data-header="false">
</div>
</div>
<div id="important">
<p align="center"><strong>IMPORTANT INFORMATION</strong><br />Derp!</p>
<img class="divider" src="assets/images/hr.gif" alt="HR" width="183" height="15" />
<p align="center"><strong>Achievements<br /></p>
<img class="divider" src="assets/images/hr.gif" alt="HR" width="183" height="15" />
<p align="center" class="style11"><strong>UPCOMING EVENTS<br /></strong>stuff<br /></p>
<p align="center"><br /> <strong>more stuff</strong><br /></p>
</div>
</div>
Make the #wrappers position be relative or absolute.
Then set the inner div positions to be absolute.
jsfiddle example: http://jsfiddle.net/kRHTj/
I would float them both left or right.