The Problem
There is a space below the img in md screen size, and I try to get rid of it.
I've tried to add pa-0 in class, but still can't figure out how to achieve the result.
Restriction
Since the whole code will be received in frontend Nuxt2 in v-html to represent the description + image. So I couldn't add CSS as well. Only vanilla html+ Some Vuetify syntax.
Update
This is for Nuxt2 with Vuetify, using in v-html.
Update ver.2
Initially there is a css attribute in the section of v-html.
margin-bottom: 12px;
But the answer is a good format to code in vanilla html.
my code
<div class="py-6 pa-0">
<div class="row no-gutters align-center" style="background-color: #f6f6f6">
<div class="col-md-6 col-12 order-md-1 order-2 px-4 mb-1">
<h1 class="display-1 py-8">Main Property</h1>
<div class="align-center d-flex justify-space-between mb-1">
<h5>Water</h5>
<div class="mb-1"><small>And more</small></div>
</div>
</div>
<div class="col-md-6 col-12 order-md-2 order-1">
<img class="mx-auto" src="https://images.unsplash.com/photo-1668277280345-f3949c1b6aa2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" lazy-src="https://images.unsplash.com/photo-1674707735136-3d3a8720397e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80"
alt="test" />
</div>
</div>
</div>
Hey this sounds like an an issue with line height getting the best of things,
simply set the font-size of the image container to 0 and the bottom space should disappear.
div {
font-size: 0;
}
Related
I want to make a user card for the front-end im currently making and our/my approach for that was to resize the user image based on the width given, but we noticed especially on large screens the Image gets really big while the text remains small.
I created a small mock-up in adobe xd how I image it to look like :
User-Card Mockup
What is common approach to this?
The only way I could imagine is to make a media query every 100 or 200px and that would be annoying as you can imagine.
This can't be that annoying right?
We're using Angular with SCSS and also used a lot of Bootstrap 4 but kinda want to get away from bootstrap.
This is the HTMl of our component before I tried changing it :
<div class="mb-3" style="cursor: pointer;" (click)="openModal(user)">
<div class="row" >
<div class="col-lg-6 col-sm-6">
<img class="rounded" width="90%" style="object-fit: cover; overflow: hidden" [src]="user.avatar">
</div>
<div class="col-lg-6 col-sm-6 ml-n4 w-100">
<h3 [title]="user.name" class="text mb-0 border-bottom w-100 trunc">{{ user.name }}</h3>
<div>
<h4 class="text mb-0">{{ user.jobTitle }}</h4>
<h6 class="text mb-0">{{ user.hiredAt | date }}</h6>
<span class ="badge badge-primary">{{ user.department }}</span>
</div>
</div>
</div>
I hope this question isn't that stupid.
If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto
`
<img class="rounded responsive" width="90%" style="object-fit: cover; overflow: hidden" [src]="user.avatar">
</div>`
.responsive { width: 100%; height: auto; }
I'm trying out bootstrap column system and I'm trying to center a text but it wont work because it has a padding that maybe comes from the bootstrap row class here's my code
<section className="home-main-content row" style={{paddingRight:'0px', marginRight:0}}>
<div className="text-a-img row col-12">
<div className="ti-title col-12 mt-4 text-center row">
<h1>Fast response</h1>
</div>
<div className="ti-img col-12"></div>
<div className="ti-text-col-12"></div>
</div>
<div className="text-a-img row col-12">
<div className="ti-title col-12 mt-4 text-center row">
<h1>Fast response</h1>
</div>
<div className="ti-img col-12"></div>
<div className="ti-text-col-12"></div>
</div>
<div className="text-a-img row col-12">
<div className="ti-title col-12 mt-4 text-center row">
<h1>Fast response</h1>
</div>
<div className="ti-img col-12"></div>
<div className="ti-text-col-12"></div>
</div>
</section>
those custom class names did nothing cause my css is still empty it looked like this in action
the only way I can get rid of this padding is to remove the row class and I don't want to do that I've tried inline styles custom class etc, how do I get rid of this padding?
Logically this isn't the way to go with bootstrap grids. The first issue I can see here is that you are directly using row inside a row. Ideally row should be immediately followed by a col. and if you want to introduce new grid rows/cols, you should do in that column. So it would be something like that:
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-6">
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
and in your case:
<section className="home-main-content row" style={{paddingRight:'0px', marginRight:0}}>
<div className="text-a-img col-12">
<div className="row">
<div className="ti-title col-12 mt-4 text-center row">
<h1>Fast response</h1>
</div>
<div className="ti-img col-12"></div>
<div className="ti-text-col-12"></div>
</div>
</div>
</section>
Also some other things to consider:
Always wrap you rows/cols grid with container class, either container or container-fluid.
Plus, consider setting you own margin and padding values for rows and columns, as bootstrap also have default values for row and col class. So please consider them as well.
And also you are clearly using react.js, so I'll suggest to go for REACTSTRAP. its a bootstrap wrapper for react. you'll have much cleaner code to work with. its as easy as this:
<Container>
<Row>
<Col md={12}>
</Col>
</Row>
</Container>
As I mentioned, immediately nested rows is non-standard. The styles you've shown are for elements that are children of rows and are related to gutters. So by nesting rows as you have that styles are applied to the interior element.
Either remove the outer row class or put a column between the rows, per standard implementation.
Did you try to write "text-align: center" in css
<div class="row mt-5 d-flex">
<div class="col-md-3 p-5 mt-3">
<img id="image" class="align-self-center"
src="background1.jpg"
width="80%" height="100%"/>
</div>
<div class="col-md-4 align-self-center">
<span id="text">
text
</span>
</div>
<div class="col-md-5 background-image">
</div>
</div>
Result:
I don't know why the empty space between the rounded image and the end of column is there. I use bootstrap. I've put borders around divs with "col-md-*" in order to see the edges correctly.
I tried setting padding and margin to 0 but there weren't any changes. I think it has to do something with the "img" tag (I also tried setting it to be displayed as a block).
Check for any padding or margin. usually bootstrap adds those properties automatically with col-md-** classes. You might have to override those classes. I would use the inspect element tool to track them.
Hey i was just messing with some css transforms and i can't make this happen,
https://codepen.io/simobm/pen/YvoOMO
Im using Bootstrap 4 and so i make 2 columns , on the left there is an image and on the right some text, now i want the text to to be vertical and centered so i use :
transform:rotate(90deg)
on the text and :
align-items: center;
text-align: center;
On the column itself . The problem as you can see is that on mobile, the text breaks to 2 lines and 3 lines consecutively.
There is a handy text-nowrap class that you can apply that will stop the text from becoming multiple lines.
<div class="container">
<div class="row mt-5">
<div class="col-9 ">
<img class="img-fluid" src="https://images.unsplash.com/photo-1521818372696-23e67aff37a5?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b42f31aba73642725afa0a222d211542" alt="">
</div>
<div class="col-3 d-flex align-items-center justify-content-center">
<p class="rotate text-nowrap">Azurmendi by ENEKO ATXA</p>
</div>
</div>
</div>
CodePen
Without handling text resizing, this can have some potentially undesirable effects on mobile.
Useful Links
Bootstrap text-nowrap Documentation
I want the text to look like this on my image:
which is slightly away from the "Center" point of the image(as i want to avoid the phone in the image), so text-center wouldnt work. I currently set the division of the row to "relative" and the text to "Absolute" in order to even get the text on top of the image. But when i resize the image, it will be displaced.
Code:
<section>
<div class="col-lg-12 text-center"style="margin: 0;padding: 0;position: relative;">
<img class="img-fluid" style="width:100%;" src="img/phone-transparent.png" alt=""></img>
<h2 style="color:red;position: absolute; top: 120px; width: 100%;">This is also</br>available on your mobile.</h2>
</div>
</section>
On original screensize:
On a different screensize:
This can be done using only Bootstrap 4 classes. Read the documentation on using the grid, and the utility classes for positioning and flexbox. You don't need all the inline CSS styles.
<div class="container-fluid">
<section class="row no-gutter align-items-center">
<div class="col-lg-12 text-center p-0 d-flex align-items-center">
<img class="img-fluid position-relative mx-auto" src="//placehold.it/1900x400" alt="">
<h3 class="w-100 position-absolute text-danger my-auto">This is also<br>available on your mobile.</h3>
</div>
</section>
</div>
Demo
Remember that .col-* must be placed in the .row, and the .row
should be inside a container.
You can use the spacing utils and CSS object-fit on the image to get the position and size: Demo 2 (you will need to tweak this as desired).