I am new to ionic. I am converting an existing angular app into mobile app using ionic framework. But, I can't add a side menu to this. How do I do that.
Here's my code:
<div class="wrap">
<div class="header">
<div class="pull-right">
<a href="#" class="handle"><i class="fa fa-bars">
</i></a>
</div>
<div class="text-center">
<h1>SKY</h1>
</div>
</div>
<div class="items-list">
<div class="item">
<div class="clearfix">
<div class="item-thumb-container">
<img src="images/item-1.jpg" class="item-thumb img-responsive">
</div>
<div class="item-details-container">
<h2 class="item-title">Item Name</h2>
<div class="item-description">
<p>Lorem ipsum dolor sit amet, sit qualibo beloi refashi ispuias.</p>
</div>
<div class="item-meta">
See
<span class="qty">10 <i class="fa fa-glass" aria-hidden="true"></i></span>
<span class="price">9 SAR <span class="round"><i class="fa fa-dollar" aria-hidden="true"></i></span></span>
</div>
</div>
</div>
</div>
<div class="item item-img-right">
<a href="#" ui-sref="single">
<div class="clearfix">
<div class="item-details-container">
<h2 class="item-title">Item Name</h2>
<div class="item-description">
<p>Lorem ipsum dolor sit amet, sit qualibo beloi refashi ispuias.</p>
</div>
<div class="item-meta">
<span class="item-btn">See</span>
<span class="qty">10 <i class="fa fa-glass" aria-hidden="true"></i></span>
<span class="price">9 SAR <span class="round"><i class="fa fa-dollar" aria-hidden="true"></i></span></span>
</div>
</div>
<div class="item-thumb-container">
<img src="images/item-1.jpg" class="item-thumb img-responsive">
</div>
</div>
</a>
</div>
<div class="item">
<a href="#" ui-sref="single">
<div class="clearfix">
<div class="item-thumb-container">
<img src="images/item-1.jpg" class="item-thumb img-responsive">
</div>
<div class="item-details-container">
<h2 class="item-title">Item Name</h2>
<div class="item-description">
<p>Lorem ipsum dolor sit amet, sit qualibo beloi refashi ispuias.</p>
</div>
<div class="item-meta">
<span class="item-btn">See</span>
<span class="qty">10 <i class="fa fa-glass" aria-hidden="true"></i></span>
<span class="price">9 SAR <span class="round"><i class="fa fa-dollar" aria-hidden="true"></i></span></span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
I want to show the side menu when the button to the right is clicked. I have tried adding <ion-sidemenus> but it shows the menu list items outside.
Ionic calls this MenuToggle which can be easily implemented by a single line of code
<button ion-button menuToggle>Toggle Menu</button>
Read more about MenuToggle on the official docs.
Related
Need help aligning those sections:
/*=============== SKILLS ===============*/
.skills__content{
row-gap: 3.5rem;
}
.skills__title{
font-size: var(--h3-font-size);
text-align: center;
margin-bottom: 1.5rem;
}
.skills__box{
display: flex;
justify-content: center;
column-gap: 3rem
}
.skills__group {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-content: flex-start;
row-gap: 1rem;
}
.skills__data{
display: flex;
column-gap: .5rem;
}
.skills__data i{
font-size: 1rem;
color: var(--first-color);
}
.skills__name{
font-size: var(--normal-font-size);
font-weight: 500;
line-height: .5rem;
}
.skills__level{
font-size: var(--smaller-font-size);
}
<!-- skills -->
<div class="skills__content grid" data-content id="skills">
<div class="skills_area">
<h3 class="skills_title">
Desenvolvedor Frontend
</h3>
<div class="skills__box">
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">HTML</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">JavaScript</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Bootstrap</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">CSS</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
</div>
</div>
<div class="skills_area">
<h3 class="skills_title">
Desenvolvedor Mobile
</h3>
<div class="skills__box">
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Swift</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Storyboard</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">SwiftUI</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Kotlin</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
</div>
</div>
<div class="skills_area">
<h3 class="skills_title">
Extras
</h3>
<div class="skills__box">
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Inglês</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">MySQL</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Python</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Design Thinking</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
So far it looks like this, I've tried everything but it seems like its dependent on the text length from the skills_data and skills_name. whenever i change it i change the formatting on the website, so it looks terrible. I've spend a lot of time trying to make it 2 columns of 2 names, and when i could do it this second bug happened.
edited the class ".skills__group", added "width: 55%;" to standardize the width of the items and edited the ".skills__box" class, added "margin-left: 20%;" and edited "justify-content: left;"
/*=============== SKILLS ===============*/
.skills__content{
row-gap: 3.5rem;
}
.skills__title{
font-size: var(--h3-font-size);
text-align: center;
margin-bottom: 1.5rem;
}
.skills__box{
display: flex;
justify-content: left;
column-gap: 3rem;
margin-left: 20%;
}
.skills__group {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-content: flex-start;
row-gap: 1rem;
width: 55%;
}
.skills__data{
display: flex;
column-gap: .5rem;
}
.skills__data i{
font-size: 1rem;
color: var(--first-color);
}
.skills__name{
font-size: var(--normal-font-size);
font-weight: 500;
line-height: .5rem;
}
.skills__level{
font-size: var(--smaller-font-size);
}
<!-- skills -->
<div class="skills__content grid" data-content id="skills">
<div class="skills_area">
<h3 class="skills_title">
Desenvolvedor Frontend
</h3>
<div class="skills__box">
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">HTML</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">JavaScript</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Bootstrap</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">CSS</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
</div>
</div>
<div class="skills_area">
<h3 class="skills_title">
Desenvolvedor Mobile
</h3>
<div class="skills__box">
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Swift</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Storyboard</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">SwiftUI</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Kotlin</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
</div>
</div>
<div class="skills_area">
<h3 class="skills_title">
Extras
</h3>
<div class="skills__box">
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Inglês</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">MySQL</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Python</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Design Thinking</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You got it right. The misalignment is caused by the unequal length of the text in the "skills_data" and "skills_name" sections.
Have you tried using a table with 2 columns to display bot sections? Set the width of the first column to a fixed value and let the remaining column fill the space.
<style>
table {
width: 100%;
}
.skill-name {
width: 120px;
padding-right: 20px;
text-align: right;
font-weight: bold;
}
.skill-data {
padding-left: 20px;
}
</style>
<table>
<tr>
<td class="skill-name">Skill 1</td>
<td class="skill-data">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar orci vel nulla lobortis, ut gravida dui aliquet.</td>
</tr>
<tr>
<td class="skill-name">Skill 2</td>
<td class="skill-data">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar orci vel nulla lobortis, ut gravida dui aliquet. Mauris malesuada ex in sapien semper, vel auctor lorem ultrices.</td>
</tr>
<tr>
<td class="skill-name">Skill 3</td>
<td class="skill-data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
</table>
That's just an example and you can adjust te width of the skill name column and the padding values to suit your needs.
I am new to the web designing and trying to learn bootstrap. I want to create a product page for that I tried to use the predefined template from - https://www.bootdey.com/snippets/view/shop-product-detail#css
When I used the given code it is not showing as photos and description is devided in two parts. Both are in vertical pattern.
I want it to look like this :
I want to devide the images and information in two columns and wrap the whole product details in white box.
here is the code:
<div class="container bootdey">
<div class="col-md-12">
<section class="panel">
<div class="panel-body">
<div class="col-md-6">
<div class="pro-img-details">
<img src="https://via.placeholder.com/550x380/FFB6C1/000000" alt="">
</div>
<div class="pro-img-list">
<a href="#">
<img src="https://via.placeholder.com/115x100/87CEFA/000000" alt="">
</a>
<a href="#">
<img src="https://via.placeholder.com/115x100/FF7F50/000000" alt="">
</a>
<a href="#">
<img src="https://via.placeholder.com/115x100/20B2AA/000000" alt="">
</a>
<a href="#">
<img src="https://via.placeholder.com/120x100/20B2AA/000000" alt="">
</a>
</div>
</div>
<div class="col-md-6">
<h4 class="pro-d-title">
<a href="#" class="">
Leopard Shirt Dress
</a>
</h4>
<p>
Praesent ac condimentum felis. Nulla at nisl orci, at dignissim dolor, The best product descriptions address your ideal buyer directly and personally. The best product descriptions address your ideal buyer directly and personally.
</p>
<div class="product_meta">
<span class="posted_in"> <strong>Categories:</strong> <a rel="tag" href="#">Jackets</a>, <a rel="tag" href="#">Men</a>, <a rel="tag" href="#">Shirts</a>, <a rel="tag" href="#">T-shirt</a>.</span>
<span class="tagged_as"><strong>Tags:</strong> <a rel="tag" href="#">mens</a>, <a rel="tag" href="#">womens</a>.</span>
</div>
<div class="m-bot15"> <strong>Price : </strong> <span class="amount-old">$544</span> <span class="pro-price"> $300.00</span></div>
<div class="form-group">
<label>Quantity</label>
<input type="quantiy" placeholder="1" class="form-control quantity">
</div>
<p>
<button class="btn btn-round btn-danger" type="button"><i class="fa fa-shopping-cart"></i> Add to Cart</button>
</p>
</div>
</div>
</section>
</div>
</div>
Please help. Thank you.
Use d-flex class in the parent div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<div class="container bootdey">
<div class="col-md-12">
<section class="panel">
<div class="panel-body d-flex border border-5 p-2">
<div class="col-md-6">
<div class="pro-img-details">
<img src="https://via.placeholder.com/550x380/FFB6C1/000000" alt="">
</div>
<div class="pro-img-list">
<a href="#">
<img src="https://via.placeholder.com/115x100/87CEFA/000000" alt="">
</a>
<a href="#">
<img src="https://via.placeholder.com/115x100/FF7F50/000000" alt="">
</a>
<a href="#">
<img src="https://via.placeholder.com/115x100/20B2AA/000000" alt="">
</a>
<a href="#">
<img src="https://via.placeholder.com/120x100/20B2AA/000000" alt="">
</a>
</div>
</div>
<div class="col-md-6 p-3">
<h4 class="pro-d-title">
<a href="#" class="">
Leopard Shirt Dress
</a>
</h4>
<p>
Praesent ac condimentum felis. Nulla at nisl orci, at dignissim dolor, The best product descriptions address your ideal buyer directly and personally. The best product descriptions address your ideal buyer directly and personally.
</p>
<div class="product_meta">
<span class="posted_in"> <strong>Categories:</strong> <a rel="tag" href="#">Jackets</a>, <a rel="tag" href="#">Men</a>, <a rel="tag" href="#">Shirts</a>, <a rel="tag" href="#">T-shirt</a>.</span>
<span class="tagged_as"><strong>Tags:</strong> <a rel="tag" href="#">mens</a>, <a rel="tag" href="#">womens</a>.</span>
</div>
<div class="m-bot15"> <strong>Price : </strong> <span class="amount-old">$544</span> <span class="pro-price"> $300.00</span></div>
<div class="form-group">
<label>Quantity</label>
<input type="quantiy" placeholder="1" class="form-control quantity">
</div>
<p>
<button class="btn btn-round btn-danger" type="button"><i class="fa fa-shopping-cart"></i> Add to Cart</button>
</p>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
I want the text length to shrink when the screen gets smaller
<div class="dress-card hvr-bob">
<div class="dress-card-head">
<img class="dress-card-img-top" src="img/rdr2.jpg" alt="">
</div>
<div class="dress-card-body">
<h2 class="dress-card-title">Red Dead Redemption 2</h2>
<p class="dress-card-para">Social Club Key</p>
<p class="dress-card-para"><span class="dress-card-price">200TL </span>
<!--<span class="dress-card-crossed">300TL</span><span class="dress-card-off"> İndirim!</span>--></p>
<div class="row">
<div class="col-md-6 card-button">
<a style="text-decoration: none;" href="">
<div class="card-button-inner bag-button"><i class="fas fa-shopping-cart"></i> Satın Al</div>
</a>
</div>
<div class="col-md-6 card-button">
<a style="text-decoration: none;" href="">
<div class="card-button-inner wish-button"><i class="fas fa-shopping-basket"></i> Sepete Ekle</div>
</a>
</div>
</div>
</div>
</div>
</div>
help
Add font-size:8vw; to your CSS. You can add it to p or specific for a class or id.
You can change the 8 to any number you want.
I hope thats what you searching :)
I'm using bootstrap for an easy responsive design. However, I moved computer today and was going to work on my project some more and my design is acting up (See attached figures). I have tested to see if I changed width, would it act up; no it did not. I then played with the height of my browsers to see if it did and yes it did act up and displayed improperly. I am fairly new-ish to bootstrap, but I am not sure what is causing this or could be on something on my computer end. I used Chrome for both viewing. I also tested with Edge and it displayed properly.
Look top-right for view port
This is what it should look like
This is what I get when changing resolution
At request, another part of the code which is loaded via JS.
<body>
<div id="interfaceNaviation" style="position:relative;top:0;left:0;right:0;background-color:green;">
<div class="navBar"><span class="navLink">Home</span> <span class="navLink">Presentation</span> <span class="navLink">Schedules</span> <span class="navLink">Display</span></div>
<br>
<div id="loginInfo">
<button id="signinButton" type="button" class="btn btn-primary btn-fixed-width navbar-btn" style="visibility: visible; display: inline;">
Sign in <i class="fa fa-white fa-sign-in icon-right"></i>
</button>
<a href="javascript:void(0);" id="signoutButton" class="navbar-nav" style="visibility: hidden; display: none;">
<span>Sign Out</span>
<i class="fa fa-blue-custom fa-sign-out"></i>
</a>
<div style="display:inline;" id="signinText">Authorize requests using OAuth 2.0:</div>
</div>
</div>
<div id="pres_interface" class="container-fluid" style="height:90%;">
<div id="pres_options" class="row" style="height:5%;">
<div id="add-placeholder" class="col-xs-2"><button id="btn_add-placeholder" class="btn btn-success fa-1.2x">Add Placeholder</button></div>
</div>
<!--style="left:0px;width:20%;height:100%;position:relative;"-->
<div id="pres_editor_panel" class="row" style="height:95%">
<div class="col-xs-2">
<div id="editor_display">
<div id="placeholderContainer"><span class="header fa-1.2x">Placeholders</span></div>
<li><span name="placeholders-change" class="fa-1.2x" data-id="ph1">ph1 <i data-id="void" class="fa fa-trash-o"></i></span></li>
<li><span name="placeholders-change" class="fa-1.2x" data-id="ph2">ph2 <i data-id="void" class="fa fa-trash-o"></i></span></li>
<li><span name="placeholders-change" class="fa-1.2x" data-id="ph04">ph04 <i data-id="void" class="fa fa-trash-o"></i></span></li>
<li><span name="placeholders-change" class="fa-1.2x" data-id="Test">Test <i data-id="void" class="fa fa-trash-o"></i></span></li>
<li><span name="placeholders-change" class="fa-1.2x" data-id="Test1">Test1 <i data-id="void" class="fa fa-trash-o"></i></span></li>
</div>
</div>
<!-- style="width:79.9%;height:100%" -->
<div class="col-xs-10 fa-padless-left">
<iframe id="fake_view" src="fake_view.html" style="width:100%;height:100%;border:1px solid #081D79;"></iframe>
</div>
</div>
</div>
<div id="pres_options-lower" style="background-color:purple;left:0;right:0;text-align:right;bottom:0;">
<button>Restore</button>
<button>Save</button>
<button>Publish</button>
</div>
<div id="window_mask" class="mask hidden"></div>
<div id="popup_display" class="hidden"></div>
<div id="sub_popup_display" class="hidden"></div>
<div id="sub_window_mask" class="mask hidden"></div>
</body>
This is my body code WITHOUT being edited via JS:
<body>
<div id="interfaceNaviation" style="position:relative;top:0;left:0;right:0;background-color:green;">
<div class="navBar"><span class="navLink">Home</span> <span class="navLink">Presentation</span> <span class="navLink">Schedules</span> <span class="navLink">Display</span></div>
<br /><div id="loginInfo">
<button id="signinButton" type="button" class="btn btn-primary btn-fixed-width navbar-btn">
Sign in <i class="fa fa-white fa-sign-in icon-right"></i>
</button>
<a href="javascript:void(0);" id="signoutButton" class="navbar-nav">
<span>Sign Out</span>
<i class="fa fa-blue-custom fa-sign-out"></i>
</a>
<div style="display:inline;" id="signinText"></div>
</div>
</div>
<div id="pres_interface" class="container-fluid" style="height:90%;" >
<div id="pres_options" class="row" style="height:5%;">
<div id="add-placeholder" class="col-xs-2"><button id="btn_add-placeholder" class="btn btn-success fa-1.2x">Add Placeholder</button></div>
</div>
<!--style="left:0px;width:20%;height:100%;position:relative;"-->
<div id="pres_editor_panel" class="row" style="height:95%">
<div class="col-xs-2">
<div id="editor_display" >
</div>
</div>
<!-- style="width:79.9%;height:100%" -->
<div class="col-xs-10 fa-padless-left">
<iframe id="fake_view" src="fake_view.html" style="width:100%;height:100%;border:1px solid #081D79;" ></iframe>
</div>
</div>
</div>
<div id="pres_options-lower" style="background-color:purple;left:0;right:0;text-align:right;bottom:0;">
<button>Restore</button>
<button>Save</button>
<button>Publish</button>
</div>
<div id="window_mask" class="mask hidden"></div>
<div id="popup_display" class="hidden"></div>
<div id="sub_popup_display" class="hidden"></div>
<div id="sub_window_mask" class="mask hidden"></div>
</body>
Thanks for any help! I am stumped at this right now.
I've been working on a problem that occured recently and i can't find how to solve it. I'm a beginner so forgive me if my problem is really simple.
<section class="container">
<div class="row">
<div class="col-md-8 text-left">
<div id="filter">
<ul>
<li><i class="icon icon-reorder"></i> All Items</li>
<li><i class="icon icon-th-large"></i> Exemple</li>
<li><i class="icon icon-th-list"></i> Exemple</li>
<li><i class="icon icon-th"></i> Exemple</li>
</ul>
</div>
</div>
<div class="col-md-4 text-right">
<div id="search">
<p>Lorem Ipsum</p>
</div>
</div>
</div>
</section>
<section class="container">
<div id="content">
<div class="row">
<div class="col-md-9">
<div class="boxportfolio3 item cat2 cat3">
<div class="boxcontainer">
<img src="../img.jpg" alt="">
<div class="roll">
<div class="wrapcaption">
<i class="icon-link captionicons"></i>
<a data-gal="prettyPhoto[gallery1]" href="../img.jpg" title="Exemple"><i class="icon-zoom-in captionicons"></i></a>
</div>
</div>
<h1>Exemple</h1>
<p>
Exemple
</p>
</div>
</div>
<!-- box 2 -->
<div class="boxportfolio3 item cat1">
<div class="boxcontainer">
<img src="../img.jpg" alt="">
<div class="roll">
<div class="wrapcaption">
<i class="icon-link captionicons"></i>
<a data-gal="prettyPhoto[gallery1]" href="../img.jpg" title="Exemple"><i class="icon-zoom-in captionicons"></i></a>
</div>
</div>
<h1>Exemple</h1>
<p>
Exemple
</p>
</div>
</div>
<!-- box 3 -->
<div class="boxportfolio3 item cat2 cat3">
<div class="boxcontainer">
<img src="../img.jpg" alt="">
<div class="roll">
<div class="wrapcaption">
<i class="icon-link captionicons"></i>
<a data-gal="prettyPhoto[gallery1]" href="../img.jpg" title="Exemple"><i class="icon-zoom-in captionicons"></i></a>
</div>
</div>
<h1>Exemple</h1>
<p>
Exemple
</p>
</div>
</div>
<!-- box 4 -->
<div class="boxportfolio3 item cat1">
<div class="boxcontainer">
<img src="../img.jpg" alt="">
<div class="roll">
<div class="wrapcaption">
<i class="icon-link captionicons"></i>
<a data-gal="prettyPhoto[gallery1]" href="../img.jpg" title="Exemple"><i class="icon-zoom-in captionicons"></i></a>
</div>
</div>
<h1>Exemple</h1>
<p>
Exemple
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="text-side">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac velit luctus, pharetra magna eu, auctor purus.</p>
</div>
</div>
</div>
</div>
</section>
Now since i want my block to be divided in 2 I used a col-md-9 and a col-md-3.
What i get is this : http://image.noelshack.com/fichiers/2015/20/1431873111-resultat.jpg
What i had and what i would like is this : http://image.noelshack.com/fichiers/2015/20/1431873148-attente.jpg
I want my boxcontainer to fill the full space of the col-md-9, but there is this blank space that I cannot fill and I don't know why.
I hope i was clear enough since english is not my native language, and since i'm still a beginner in programming. I'd be happy to hear advices from you.
It seems you have defined margins for your "box" items. This means that the width of the div with id="content" is now small to contain your box items plus their margins. try removing any margins