I would like to find a solution, where in the desktop view (bigger than col-sm), the responsive picture in the index_img class is vertical in the center align related to the index_shortdescription text.
I tried more solutions, but I did'nt find the answer.
Example
JSBIN
<div class="postbox" data-page-url="/">
<h2 class="index_title">SanDisk Ultra Fit 32GB</h2>
<div class="row">
<div class="col-sm-4 index_img"><a href="/blog/post/sandisk-ultra-fit">
<img src="/content/img/index/sandisk-compressor.png" class="img-responsive center-block" alt="SanDisk Logo"></a>
</div>
<div class="col-sm-8 index_shortdescription"><p>VERY LONG TEXT</p></div>
</div>
</div>
Add the following css:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
Then change the "row" class to "row-eq-height" and add a style="verical-align:center"
<div class="postbox" data-page-url="/">
<h2 class="index_title">SanDisk Ultra Fit 32GB</h2>
<div class="row-eq-height">
<div class="col-sm-4 index_img" style="verical-align:center" ><a href="/blog/post/sandisk-ultra-fit">
<img src="/content/img/index/sandisk-compressor.png" class="img-responsive center-block" alt="SanDisk Logo"></a>
</div>
<div class="col-sm-8 index_shortdescription"><p>VERY LONG TEXT</p></div>
</div>
</div>
Related
I am trying to vertically center my header elements, but the following code that I've tried isnt working. What am I doing wrong? Please let me know where I can add padding or something else.
Here is the website: https://eagleroofingcontractor.com/
What I have so far:
<div class="col-md-12">
<aside id="text-3" class="widget header-right widget_text">
<div class="textwidget">
<div class="container extra-info">
<div class="row">
<div class="col-md-4">
<i class="fa fa-phone"></i>
<div class="phone">
<h3>631-209-7377</h3>
<span>info#eagleroofingcontractor.com</span>
</div>
</div>
<div class="col-md-2">
<div>
<img src="https://eagleroofingcontractor.com/wp-content/uploads/2019/02/Better-Business-Bureau-A-Logo.png">
</div>
</div>
<div class="col-md-2">
<div>
<img src="https://eagleroofingcontractor.com/wp-content/uploads/2019/02/gaf-master-elite-gold800px-800x292.jpg">
</div>
</div>
<div class="col-md-2">
<div>
<img src="https://eagleroofingcontractor.com/wp-content/uploads/2019/02/Google_Partners_logo_blogpage.jpg">
</div>
</div>
<div class="col-md-2">
<div>
<img src="https://eagleroofingcontractor.com/wp-content/uploads/2019/02/googole-guaranteed-min.png">
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
You need to change the elements .textwidget, .extra-info and the col-md-2 columns inside .extra-info to flex items and then vertically center the columns using the css flex property align-items:center.
Add the following to your CSS:
.textwidget {
display: flex;
}
.extra-info {
display: flex;
}
.extra-info .col-md-2 {
display: flex;
align-items: center;
}
N.B. Your site has a lot of elements using a common ID (e.g. all your <aside> elements in your header uses the same #text-3 ID).
You should not use the same ID for more than one elements. Replace them with a common class-name or use a different ID for each element instead.
enter image description here
I have an issue with thumbnail size. In the picture, there should have been another picture in white area in the left-middle, but the space is skipped because an image above has a long title. Everytime a picture with a long title is showed up, the size becomes larger. Is there any way I can fix thumbnail size even though the title gets longer?
Here is my HTML code and CSS i don't write anything.
<div class="panel-body">
<div id="recipeResults" class="row">
<!-- templates/BasicImages/imageTemplates.js -->
</div>
</div>
Here is actual code. Sorry :)
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<div class="hovereffect">
<img class="img-responsive center-block" src="{{json.url}}" alt="{{json.alt_name}}">
<div class="overlay">
<h3> {{json.hoverDescription}}</h3>
<a class="info" href="#"><i class="fa fa-clock-o fa-fw" aria-hidden="true"></i>{{json.cookTime}}</a>
</div>
</div>
<div class="caption">
<p style="font-size: 1pt;"> </p>
<h4>{{json.name}}</h4>
<p>{{json.description}}</p>
<p><button type="button" class="btn btn-default btn-sm" aria-label="Left Align">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Save
</button></p>
</div>
</div>
</div>
You can use this code for the box tag (or title tag) in CSS to prevent any over sizing
.class-name{
overflow: hidden;
}
CSS overflow Property
Using Flex you can align children of different height vertically without leaving gaps.
<div id="outer-wrap">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
And the CSS
div#outer-wrap {
display: -ms-flexbox;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100 vw;
}
div#outer-wrap .child {
width: 33.3%;
}
I am currently having a problem where the bootstrap img-responsive class isn't working as it should due to me needing the image to be as far right in the div box as possible. I have two identically sized arrows which surrounds titles of my site. When the browser is scaled down to mobile size, the left arrow appears smaller and more distorted than the right counterpart.
Full Sized Title
Phone Sized Title
HTML:
<div class="row">
<div class="col-lg-3"> </div>
<div class="col-xs-3 col-lg-2 arrow-right">
<img class="img-responsive img-right" src="img/arrow-right.png" alt="">
</div>
<div class="col-xs-6 col-lg-2 text-center">
<h2 class="section-heading">RSVP</h2>
</div>
<div class="col-xs-3 col-lg-2 arrow-left">
<img class="img-responsive img-left" src="img/arrow-left.png" alt="">
</div>
<div class="col-lg-3"> </div>
</div>
CSS:
.arrow-right {
padding-top: 12px;
}
.arrow-left {
padding-top: 12px;
padding-left: 0;
}
#media (min-width: 768px) {
.img-right {
display: block;
margin: auto;
margin-left: 34px;
}
.img-left {
margin: auto;
margin-right: 30px;
}
}
My question would be, is there an easier way to get these arrows as close to the titles as possible and have them scale down to phone sized perfectly?
Change the XS and make 4/4/4
<div class="row">
<div class="col-lg-3"> </div>
<div class="col-xs-4 col-lg-2 arrow-right">
<img class="img-responsive img-right" src="img/arrow-right.png" alt="">
</div>
<div class="col-xs-4 col-lg-2 text-center">
<h2 class="section-heading">RSVP</h2>
</div>
<div class="col-xs-4 col-lg-2 arrow-left">
<img class="img-responsive img-left" src="img/arrow-left.png" alt="">
</div>
<div class="col-lg-3"> </div>
</div>
I think the blurry image is due to display: block, for getting the image as close to the text as possible you could consider using ::after or ::before pseudo-elements. Also you could try the following HTML:
<div class="col-xs-3 col-lg-2 arrow-right">
</div>
<div class="col-xs-12 col-lg-6 text-center">
<img class="img-responsive img-right" src="img/arrow-right.png" alt="">
<h2 class="section-heading">RSVP</h2>
<img class="img-responsive img-left" src="img/arrow-left.png" alt="">
</div>
</div>
</div>
Also, could you post a fiddle or http://www.bootply.com/?
EDIT -- (after bootply response)
using a little CSS i got it working (without the use of media queries etc.). The CSS is now a lot less and I hope this is what you are looking for (because the images are as close as possible to the text). Using float: left to the img, h2 and a little padding-top: 24px for the images got it lined up. See bootply:
http://www.bootply.com/2Hp6stSs9B
I'm trying to get a simple grid-like webpage done where there are 8 DIVs spanning across 9 positions.
I've done the following for another part of the website using Bootstrap's grid system without running into any kind of issue (Not the actual content, just a mockup using Photoshop)
What I want to do is this:
Having in mind that when the site is viewed in a mobile device, the order of the elements must be more-or-less preserved. Also Bootstrap standard margins/paddings must be used
Ideally this would be fixed-height DIVs inside of which I'll put an image or some text, depending on which one. The double-height one will contain a picture
<div class="wrapper" id="mypage">
<section class="grid-container service">
<ul class="small-grid grid-col-3">
<li class="col-3">
<div id="subtitle">
SUBTITLE 1
</div>
</li>
<li class="col-3">
<div id="title">
TITLE
</div>
</li>
<li class="col-3">
<div id="subtitle">
SUBTITLE 2
</div>
</li>
<a href="">
<li class="col-3 img-dynamic-size" style="background-image: url('../1.jpg')">
</li>
</a>
<a href="">
<li class="col-3 img-dynamic-size" style="background-image: url('../2.jpg')">
</li>
</a>
Sample code of the 1st screen
Thank you, I can't figure out how to do it after thinking about it for some time...
Okay.. I think I'm following you, I've just drawn up some sample bootstrap code for you to see what I'm talking about. You can achieve this look by just stripping out relevant padding/margin and using the Bootstrap equal-height columns experiment
I have just stripped out all relevant margin and padding on the nested rows in the example but you can obviously play with these values only cancelling out or amending the vertical/horizontal margin/padding as required for your own use.
HTML
<div class="container">
<div class="row">
<div class="col-xs-4 border">
<div id="subtitle">SUBTITLE 1</div>
</div>
<div class="col-xs-4 border">
<div id="title">TITLE</div>
</div>
<div class="col-xs-4 border">
<div id="title">TITLE</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-xs-8 nopadding">
<div class="row nomargin">
<div class="col-xs-6 nomargin border">Some Content...</div>
<div class="col-xs-6 nomargin border">Some More Content...</div>
</div>
<div class="row nomargin">
<div class="col-xs-6 nomargin border">Some Content Below...</div>
<div class="col-xs-6 nomargin border">Some More Content Below...</div>
</div>
</div>
<div class="col-xs-4 border">Content matching height using the 'row-eq-height' class</div>
</div>
CSS
.nomargin {
margin:0;
}
.nopadding {
padding: 0;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.border {
border: 1px solid red;
min-height: 50px;
}
You can see a jsFiddle here
I'm using a template with Bootstrap.
The following code:
<div class="row mix-grid thumbnails wrapper white" id="pictures_placeholder">
<div class="col-md-3 col-sm-4 mix ">
<div class="mix-inner">
<img class="img-responsive" src="../../../assets/admin/pages/media/works/img1.jpg"
alt="">
<div class="mix-details picture-bottom-label">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="col-md-4 col-xs-3">
<img src="../../../assets/admin/pages/media/profile/profile_user.jpg"
class="img-responsive img-circle profile-pic"
alt=""
/>
</div>
<div class="col-md-8 col-xs-8 text-left user-name">Asaf Nevo</div>
</div>
</div>
</div>
</div>
</div>
</div>
does this:
How can I make the name (Asaf Nevo) to be entered to the image ?
try adding this to CSS:
div.user-name{height:92px;line-height:92px;}
hope that helps.
Put the name in the same div as the image. Make both inline.
<img src="../../../assets/admin/pages/media/profile/profile_user.jpg"
class="img-responsive img-circle profile-pic" alt="" />Asav Nevo
Now play with the CSS property vertical-align. Something like vertical-align: middle could work and yes, this property should be applied to the surrounding div if not mistaken, potentially also to the inline content itself. I cannot try it right now.
Add this to the css:
.user-name {
margin-top:50%;
}