I have a site: http://tele-verse.com/site
Where I have a div with an image of a phone, a group photo and a quote.
I have the button "Tell me more" in a certain position relative to the image and I want to keep them in the same position when the screen size is resized to mobile.
Is there a way to lock the items in the div in place?
Here is my code:
<div class="row">
<div class="col-sm-4">
<h4>Phone Systems</h4>
<h4>for All Sized Businesses</h4>
<div class='adPhotoBtn'>
<img src='http://tele-verse.com/site/wp-content/uploads/2015/09/phone.png' alt='phone' />
<a href='http://tele-verse.com/site/contact/'><button type="button" class='adButton'>Tell Me More</button></a>
</div>
</div>
<div class="col-sm-4">
<h4>Mitel MiCollab</h4>
<h4>solutions to keep your</h4>
<h4>business connected</h4>
<div class='adPhotoBtn'>
<img src='http://tele-verse.com/site/wp-content/uploads/2015/09/Collabphoto-transparent.png' alt='collaborate' />
<a href='http://tele-verse.com/site/contact/'><button type="button" class='adButton'>Get Connected</button></a>
</div>
</div>
<div class="col-sm-4">
<img class='quote' src='http://tele-verse.com/site/wp-content/uploads/2015/09/open-quotes.png' alt='"' />
<p>I want you to know that we are very pleased with the quality of service Dan and the rest of your company provides. We sincerely appreciate your responsiveness and the way you conduct business.</p>
<img class='quote' src='http://tele-verse.com/site/wp-content/uploads/2015/09/close-quotes.png' alt='"' />
<h6>MICHAEL GEIGER</h6>
<h6>IT Manager - Precision Gear</h6>
</div>
</div>
Added div around items and set a max-width seemed to work fine.
<div class="row">
<div class="col-md-4 col-sm-4">
<div class='homeAds'>
<h4>Phone Systems</h4>
<h4>for All Sized Businesses</h4>
<div class='adPhotoBtn'>
<img src='http://tele-verse.com/site/wp-content/uploads/2015/09/phone.png' alt='phone' />
<a href='http://tele-verse.com/site/contact/'><button type="button" class='adButton'>Tell Me More</button></a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class='homeAds'>
<h4>Mitel MiCollab</h4>
<h4>solutions to keep your</h4>
<h4>business connected</h4>
<div class='adPhotoBtn'>
<img src='http://tele-verse.com/site/wp-content/uploads/2015/09/Collabphoto-transparent.png' alt='collaborate' />
<a href='http://tele-verse.com/site/contact/'><button type="button" class='adButton'>Get Connected</button></a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class='homeAds'>
<img class='quote' src='http://tele-verse.com/site/wp-content/uploads/2015/09/open-quotes.png' alt='"' />
<p>I want you to know that we are very pleased with the quality of service Dan and the rest of your company provides. We sincerely appreciate your responsiveness and the way you conduct business.</p>
<img class='quote' src='http://tele-verse.com/site/wp-content/uploads/2015/09/close-quotes.png' alt='"' />
<h6>MICHAEL GEIGER</h6>
<h6>IT Manager - Precision Gear</h6>
<div class='homeAds'>
</div>
</div>
Related
I am developing a website using a bought template. Everything seems to be perfect. However, I have an issue with a section of the html code where it works fine in normal screen sizes but in extra wide screen size, the div size is reduced to a strip. The images below demonstrate this:
This is how the div is in normal screens
And when the screen is extra wide, for example in devices with more than 15" screen, this is how the div looks like:
My main challenge however is that I really don't know which property is controlling this from the css file. I tried inspecting the code from chrome and the most consistent property is the box-sizing property and the value is set to inherit. Let me share the html code for this section of the div for further clarity.
<section class="gray pt-5 pb-0">
<div class="container">
<div class="row">
<div class="col text-center">
<div class="sec-heading mx-auto">
<h2>What People say About Us</h2>
<p>Vukaplus has transformed many businesses and has moved many forward socially and financially.</p>
</div>
</div>
</div>
<div class="row m-0">
<div class="owl-carousel" id="testimonials">
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>Vukaplus helped us sell our house with minimal effort. Their team was efficient and always there to help!</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_property.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Brian Inchedi</h5>
<span class="small-font">Real Estate Agent</span>
</div>
</div>
</div>
</div>
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>Vukaplus has provided a platform to showcase our daycare business. After listing the business on the platform, we have never stopped receiving new clients!</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_business.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Irene Wambui</h5>
<span class="small-font">Happy Baby Day Care</span>
</div>
</div>
</div>
</div>
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>My car couldn't sell in a yard for 3 months. The day I listed it on Vukaplus, I received a customer instantly with a better offer than I wanted.</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_vehicle.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Teddy Kimani</h5>
<span class="small-font">Car Sales Person</span>
</div>
</div>
</div>
</div>
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>My client wanted a potential candidate for a vacancy he had in his company. A single post on Vukaplus gave me overwhelming applications and I got the right candidate.</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_recruitment.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Margaret Wada</h5>
<span class="small-font">Recruiting Agent</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Kindly advise as I am not that good in frontend. The css file is too big to share the code here, but I can get snipets of the sections that are used by the html section. Thank you.
Edit: Adding CSS COde Snippet
So, I have copied the code to JSFiddle and here is the link:
Code snippets on JSFiddle
You can try to specify:
min-width: someValue
and the element won't be smaller than this value;
So I have this code
<div class="row">
<a class="btn btn-default mainbutton pull-left">Back to Main Menu</a>
<img class="center-block" src="logo.png" />
</div>
It appears that the logo image is off-centered because it only takes the margin measurement after the button. How can I ensure that the button is aligned to the center?
You can put the button and the image in two different columns
Just like
<div class="row">
<div class="col-md-4">
//your button code
</div>
<div class="col-md-4">
//your image code
</div>
<div class="col-md-4">
//some other stuff
</div>
</div>
You could try a break in between like:
<div class="row">
<a class="btn btn-default mainbutton pull-left">Back to Main Menu</a>
<br/>
<img class="center-block" src="logo.png" />
</div>
After ensuring your image is positioned below your button, you should be able to follow the instructions in How to vertically align an image inside a div? if you need help aligning content inside a div.
I would break it up into 3 equal columns to make it easier.
Then you can use text-center:
<div class="row">
<div class="col-sm-4">
<a class="btn btn-primary">Back to Main Menu</a>
</div>
<div class="col-sm-4 text-center">
<img src="logo.png" />
</div>
<div class="col-sm-4"></div>
</div>
Evening to everyone.
I'm currently in the process of designing a very basic user dashboard. I'm using Bootstrap framework to make the process easier. I have used the GRID system throughout the project. Nothing complex. Just basic grids.
This is what I have done so far Image
So you can see the problem. I have absolutely no ideas on how to get this one fixed. I'd like no WHITSPACES. You see this I'd like them all to be connected even. Is it even possible to do what I want to?
I have tried messing around with the margins but then that will break the responsiveness of the website. Any ideas or suggestions are really appreciated.
<div class="row no-pad">
<div class="col-sm">
<div class="tile" id="tile1">
<div class="tiletit">
<p class="titleend">First Tile</p>
</div>
<div class="tilebody">
<img src="https://www.picgifs.com/avatars/avatars/alcohol/avatars-alcohol-093831.jpg" alt="..." class="rounded-circle">
</div>
<br/>
<h3 class="titleend text-center">Its your time <br> To have a drink!</h3>
</div>
</div>
<div class="col-sm ml-auto">
<div class="tile" id="tile2">
<h2 class="text-center" id="datetime">Monday, 31</h2>
<br/>
<h2 class="text-center" id="datetimee">7: 30</h2>
</div>
</div>
<div class="col-sm">
<div class="tile" id="tile3">
<div class="tiletit">
<p class="titleend">First Tile</p>
</div>
<div class="tilebody">
<img src="https://www.picgifs.com/avatars/avatars/alcohol/avatars-alcohol-093831.jpg" alt="..." class="rounded-circle">
<h3 class="titleend text-center">Time to <br> Make a <i>change</i></h3>
</div>
</div>
</div>
<div class="col-sm ml-auto">
<div class="tile" id="tile2">
<h2 class="text-center" id="datetime">Monday, 31</h2>
<br/>
<h2 class="text-center" id="datetimee">7: 30</h2>
</div>
</div>
</div>
So yeah that block of code generates the first row of tiles, I just use the same code all over again to get the second row
Thanks in advance
This question already has an answer here:
Bootstrap 3 - Aligning column height
(1 answer)
Closed 6 years ago.
Beginner here, I am building a one page bootstrap site, I have divided the site into sections, i have already added 1st image as the background in section one.
I have tried using the columns but no vial.
I cant get the two images side by side like shown in the prototype (http://imgur.com/a/MJQ2w).
I want the page layout to be like this with no margins but i am unable to do this with bootstrap. Please help me with your expertise.
<header style="background-image: url('static/assets/home-bg.jpg');">
<div class="intro-content">
<div class="brand-name">Learning & Experience</div>
<hr class="colored">
<div class="brand-name-subtext">Lorem Ipsum Dolor Init
</div>
</div>
<div class="scroll-down">
<a class="btn page-scroll" href="#about"><i class="fa fa-angle-down fa-fw"></i></a>
</div>
</header>
<section id="about">
<div class="container-fluid">
<div class="row row-no-gutter">
<div class="col-md-6 img-responsive">
<img src="static/assets/training.png">
</div>
<div class="col-md-6 img-responsive">
<img src="static/assets/recruit.png" >
</div>
</div>
</div>
<div>
Check my example here, Without removes any padding provide by bootstrap
HTML
<section class="values">
<div class="col-md-4 box text-white box blues">
<div class="box-home">
<h4>our values</h4>
<p>At MOCAZ PRIME, with the expertise of experienced traders, we join in giving the best advice and knowledge to individuals to ensure their financial goals can be achieved in any market conditions.</p>
<div class="icon-text">
<p>01.</p>
</div>
</div>
</div>
<div class="col-md-4 text-white box bg-city blacks">
<div class="box-home">
<h4>our philipsophy</h4>
<p>It is our ambition to keep up challenges of a dynamic and changing market. Consequently it is necessary to flexibly bring new techniques which meet the needs of our customers. This all predetermines us to achieve a leading position in the global financial advisory services.</p>
<div class="icon-text">
<p>02.</p>
</div>
</div>
</div>
<div class="col-md-4 text-white box blacks">
<div class="box-home">
<h4>our mission</h4>
<p>Our mission is to facilitate a world-class foreign exchange, metal and contracts for difference trading environment. We're dedicated to providing industry-leading technology to the international trading community and we strive to deliver educational tools and resources that enable traders to further develop their trading skills.</p>
<div class="icon-text">
<p>03.</p>
</div>
</div>
</div>
</section>
DEMO
Replace your code
<div class="col-md-6 img-responsive">
<img src="static/assets/training.png">
</div>
<div class="col-md-6 img-responsive">
<img src="static/assets/recruit.png" >
</div>
With following line of code
<div class="col-md-6">
<img src="static/assets/training.png" class=" img-responsive" />
</div>
<div class="col-md-6">
<img src="static/assets/recruit.png" class=" img-responsive" />
</div>
Fixed the issue, Thanks guys.
<section id="about">
<div class="container-fluid">
<div class="row" id="port2-second-row">
<div class="col-xs-6 imgcont" id="port2-first-col">
<img src="static/assets/training.png" alt="training" />
</div> <!-- end col-sm-6 -->
<div class="col-xs-6 imgcont" id="port2-second-col">
<img src="static/assets/recruit.png" alt="recruit" />
</div> <!-- end col-sm-6 -->
</div> <!-- end port-second-row -->
CSS :
img {
width: 100%;
height: 100%;}
.imgcont {
padding: 0px;
Just felt if this issue can be resolved with any css tweaks.
I have a row with Col -8 and Col -4 in it, Col -4 has the following 4 grid images in it with two rows again in it
<div class="col-md-4">
<div class="row">
<div class="col-md-6">
<div class="four">
<img src="images/home/client1.png" style="width:100% ; height:160px" alt="Devegowda">
<div class="four-overlay top">
<p style="font-weight: bold">HD Devegowda</p>
<br /> Former Prime Minister of India (1996)
<br />
<a class="button_example" href="#">Read</a>
</div>
</div>
<!-- <br />-->
</div>
<div class="col-md-6">
<div class="four">
<img src="images/home/client1.png" style="width:100% ; height:160px" alt="Devegowda">
<div class="four-overlay top">
<p style="font-weight: bold">HD Bhawani</p>
<br /> Former Prime Minister of India (1996)
<br />
<a class="button_example" href="#">Read</a>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6">
<div class="four">
<img src="images/home/client1.png" style="width:100% ; height:160px" alt="Devegowda">
<div class="four-overlay top">
<p style="font-weight: bold">HD Revanna</p>
<br /> Former Prime Minister of India (1996)
<br />
<a class="button_example" href="#">Read</a>
</div>
</div>
<!-- <br />-->
</div>
<div class="col-md-6">
<div class="four">
<img src="images/home/client1.png" style="width:100% ; height:160px" alt="Devegowda">
<div class="four-overlay top">
<p style="font-weight: bold">HD Kumaraswamy</p>
<br /> Former Prime Minister of India (1996)
<br />
<a class="button_example" href="#">Read</a>
</div>
</div>
</div>
</div>
</div>
It appears like this when I minimize the screen to check its mobile compatibility but it looks ugly as two images in each row getting merged like this, I feel it will be much better if there is a small padding between two images here, any help ?
From what I understand, you will need to also specify the classes for different devices (col-sm-X and col-xs-X for tablets and phones).
If you prefer not to do that ... the COL-MD will be equal to COL-XS-12 no matter of its size.
So in order to display your images properly... you should add the class col-xs-4 or 6 for each image parent that already has the class: col-md-6 .
Hope it helps.
From the bootstrap docs, try
<img src="..." class="img-responsive" alt="Responsive image">
http://getbootstrap.com/css/#images