Fix phone image and reduce magnifying issue - html

I am still learning bootstrap and have gone a little far to create a page, I am stuck on 2 things, first one is the phone image at the top section, on my screen it is fine which is 24" with 1600 resolution, but on 15" lcd the phone cuts in half, can someone tell me what to do ? how to fix this ? secondly the images , sections look so magnified so big, does it have any fix ? should I place it in a container ?
Live page : https://babaraliseehar.com/chet/
I have created a single bootstrap page but I am having a little issue in responsiveness.
<section class="section hero-section position-relative" id="a">
<div class="container-fluid position-absolute h-100 hero-bg mob-hid">
<div class="row align-items-stretch h-100">
<div class="col-md-6 hero-left"> </div>
<div class="col-md-6 hero-right"> </div>
</div>
</div>
<!-- <div class="col-md-7 p-0 hero-left-img wow fadeInLeft mob-hid" data-wow-delay=".1s">
<img src="assets/images/front-left2.png" alt="">
</div> -->
<div class="col-12 p-0 hero-mob d-none m-block">
<img src="assets/images/front-left2.png" alt="">
</div>
<div class="container">
<div class="row align-items-stretch">
<div class="col-md-6 offset-md-7 hero-right-text wow fadeInRight" data-wow-delay=".3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInRight;">
<h1>Get better, together.</h1>
<p>A professional development social network <br> for today's audience: share what you are <br> doing, in the moment, to get better. </p>
<div id="form_first">
<div class="beta-available">
<p><strong>Join the list for the next beta release!</strong></p>
<form method="post">
<div class="form-bx">
<input type="email" name="email" class="input-bx input-brd txtEmail" placeholder="Email Address" id="txtEmail_first">
</div>
<div class="form-bx ">
<button type="submit" name="submit" class="btn button-blue btnValidate_first ">
<span class="">Sign Up</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>

image is croped because you used background-size: cover;. if you don't want image to get cropped,
use:
background-size: contain;
also in your layout, image should be on right. so add:
background-position-x: right;
to your image as well.
Also if you want your image to crop, but you want the right side to be always visible, let it to be cover, and use background-position-x: right; to crop only left side.

Related

Stop background collapsing with context

I have a div which has a background image and some text and I want the content of div to stop overlapping from a part (ribbon part) of the backgrounf image. Please check images so that it's clear to you what I am willing to do.
This is how it should appear on all screens (except phones)
This is not how I want it to be. I want the text to stay away from ribbon for all screen sizes
Html:
<div id="overview1" class="col-md-4">
<div class="row d-flex align-items-center height-33">
<div class="col-lg-4 col-md-5 d-sm-block d-none"></div>
<div class="benefits col-lg-8 col-md-7">
<h3 class="text-uppercase overview1-heading ms-3">
<span class="overview1-text">2023</span>
<span class="overview1-text">benefits</span>
overview
</h3>
</div>
</div>
</div>
css:
#overview1 {
background-image: url("ribbon.jpg");
background-position: 10% 100%;
background-size: cover;
background-repeat: no-repeat;
color: white;
}
I would do it a bit differently if I were you. Instead of setting the background-image on the #overview-1, I would make two columns (put the image inside the left column and put the text inside the right column).
It would be easier to help you if you edit your question and add more HTML & CSS. Also, having a similar image (at least) would be very helpful to test the snippet.
Something like this:
<div id="overview1" class="col-md-4">
<div class="row d-flex align-items-center height-33">
<div class="col-lg-4 col-md-5 d-sm-block d-none"></div>
<div class="benefits col-lg-8 col-md-7">
<div class="row">
<div class="col-6">
<!-- Image here -->
</div>
<div class="col-6">
<h3 class="text-uppercase overview1-heading ms-3">
<span class="overview1-text">2023</span>
<span class="overview1-text">benefits</span> overview
</h3>
</div>
</div>
</div>
</div>
</div>

Centering Bootstrap5 buttons on mobile

I am currently working on a web application and I am trying to figure out how to center two bootstrap buttons side-by-side. It works on mobile, but when I try to inspect the page and view it on a mobile device, they go on separate lines and center (one on top of the other). How can I fix this so that on mobile, they appear side-by-side like on the computer? Here is the code:
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4 col-lg-3 text-center">
Button 1
</div>
<div class="col-md-4 col-lg-3 text-center">
Button 2
</div>
</div>
</div>
How about this. Remove the breakpoints from your columns and make them occupy half the space no matter what screen size you are using:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-center">
<div class="col-6 text-center">
Button 1
</div>
<div class="col-6 text-center">
Button 2
</div>
</div>
</div>
This might look more cleaner
<div class="col-xl-12" style="display:flex">
<div class="btns" style="margin:auto">
<a class="btn btn-primary" href="">Button1 </a>
<a class="btn btn-primary" href="">Button2 </a>
</div>
</div>
</div>
</div>

Bootstrap background image in container doesnt work

I am trying to add a background image for my website, using bootstrap-4 and external css (internal doesn't work for me as well).
I am trying to add image which will be behind all rows which are in a
If i try to use it for a rows inside the container it works, but i wanna the background behind all rows, not just behind one.
Could you help me with that please?
.background {
background-image: url('images/podklad.png') !important;
height: 100%;
}
#top_part {
/*background-color: #ff9900 !important;*/
}
<div class="container-fluid background" >
<div class="row" id='top_part'>
<div class="col-6" >
<div class="d-flex text-center justify-content-center align-items-baseline">
<h1>bla bla<br/>bla bla</h1>
</div>
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-primary"><h4></h4></button>
</div>
</div>
<div class="col-6">
<img class="img-fluid" src="images/krabicka.png" alt="">
</div>
</div>
<div class="row" id='top_part'>
<div class="col-12 text-center">
<h2>bla bla</h2>
</div>
</div>
<div class="row" id='top_part'>
<div class="col-4">
<div class="d-flex justify-content-center" id='lock_gear_heart'>
<img src="images/lock80px.png" alt="">
</div>
<div class="d-flex justify-content-center" id='text_lock'>
<h5>bla bla</h5>
</div>
</div>
<div class="col-4">
<div class="d-flex justify-content-center" id='lock_gear_heart'>
<img src="images/gears80px.png" alt="">
</div>
<div class="d-flex justify-content-center" id='text_lock'>
<h5>bla bla</h5>
</div>
</div>
<div class="col-4">
<div class="d-flex justify-content-center" id='lock_gear_heart'>
<img src="images/heart80px.png" alt="">
</div>
<div class="d-flex justify-content-center" id='text_lock'>
<h5>bla bla</h5>
</div>
</div>
</div>
</div>
It seems that your code worked for me.
Here's a JSFiddle I created with example pictures. You can just replace my example images with yours. Your code correctly places the image behind the container with all of the rows.
If you want the image to be behind literally everything on the page, then change your CSS to look like this:
body {
background-image: url('images/podklad.png') !important;
background-size: cover; /* Resizes the image to cover the entire container */
}
If no image is showing up, then make sure the image paths are correct.

Flexbox in Bootstrap 4 acting weird

I'm trying to use flexbox to align vertically a section.
So this is what I'm trying to align vertically:
HTML:
<!--Top Hero Section -->
<div class="d-flex hm-hero justify-content-center">
<div class="container">
<div class="row align-items-end">
<div class="col-12">
<h1 class="text-center">Fix Your Problem Today!</h1>
<p class="text-center">Start searching for a contractor or company around your area and get your problem fixed in a matter of hours!</p>
</div>
<!--Form Section -->
<div class="col-12">
<div class="form-group row justify-content-center">
<div class="col-12 col-md-6">
<input class="form-control" type="text" value="e.g. plumbing, carpentry" id="example-text-input">
</div>
<div class="col-12 col-md-4">
<input class="form-control" type="text" value="e.g. city name, postcode" id="example-text-input">
</div>
<div class="col-12 col-md-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
Regarding CSS, I've only applied this:
.hm-hero {
background: url("../img/main_pic.png") no-repeat;
background-size: fill;
min-height: 600px;
}
I can't figure out why flexbox is not working. I've tried two classes, align-content/items-center in whatever div possible and still can't get it to work.
So since I have that full width div with the background image, inside it is a container div, which I'm trying to get it to stay vertically. I really want to avoid putting a 200px margin top to this. Is this is a Bootstrap 4 bug?
I added the align-items-center class to the flex div parent and it worked. As long as you have a height on the .hm-hero the content will be centered. Hope this helps. JSFiddle
.hm-hero {
background: url("https://placehold.it/960x600") no-repeat;
background-size: fill;
min-height: 600px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!--Top Hero Section -->
<div class="d-flex hm-hero justify-content-center align-items-center">
<div class="container">
<div class="row align-items-end">
<div class="col-12">
<h1 class="text-center">Fix Your Problem Today!</h1>
<p class="text-center">Start searching for a contractor or company around your area and get your problem fixed in a matter of hours!</p>
</div>
<!--Form Section -->
<div class="col-12">
<div class="form-group row justify-content-center">
<div class="col-12 col-md-6">
<input class="form-control" type="text" value="e.g. plumbing, carpentry" id="example-text-input">
</div>
<div class="col-12 col-md-4">
<input class="form-control" type="text" value="e.g. city name, postcode" id="example-text-input">
</div>
<div class="col-12 col-md-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>

Centre align div content in bootstrap

I want my date picker to be in the middle of the page, eg. the line where I have: <div class="center-block text-center datepicker"></div>
Obviously center-block and text-center I tried already - but neither change anything. And with the offset it just makes it close to the centre without being perfectly centre aligned.
What do I need to do?
Thanks
<div class='row'>
<div class='col-sm-12'>
<div class='page-header page-header-with-icon mg-t'> <i class='fa-icon-calendar'></i>
<h2>Calendar</h2>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-block text-center datepicker"></div>
</div>
</div>
</div>
</div>
Try something like this:
<div class="col-sm-12">
<div class="datepicker"></div>
</div>
Then give the date picker something like:
.datepicker {
display:inline-block;
margin:0 auto;
}
I haven't tested this, but it would be where I would start.
style="text-align:center;" shall do the trick no? I tested and for me, the "CALENDAR" text is centered
<div class="col-sm-12">
<div class="page-header page-header-with-icon mg-t" style="text-align:center;">
<i class="fa-icon-calendar"></i>
<h2>Calendar</h2>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-block text-center datepicker"></div>
</div>
</div>
</div>
</div>
This is what should solve your problem. Add it somewhere in your custom stylesheet and change the width % to what suits your design.
.datepicker-inline {
width: 20%;
}