First of all, my native language is not English I hope that question and description are clear. I'm sorry if they're not.
Problem:
I'm using MDB framework, when I use the grid system the width of the last column is more greater than body. I tried to put widht: 100%; in the content and in every column (Class: Nx).
How do I fix this?
Html:
<div class="Mycolumns">
<div class="row">
<div class="col-8 N1" style="background-image: url(Resources/img/1.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N2" style="background-image: url(Resources/img/Sin%20t%C3%ADtulo-1.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N3" style="background-image: url(Resources/img/3.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N4" style="background-image: url(Resources/img/4.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N5" style="background-image: url(Resources/img/5.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
</div>
</div>
Css:
.N1, .N2{
height: 500px;
}
.N3, .N4, N5{
height: 300px;
}
I just encountered the same problem. What was doing it was one of my nested elements was set to width: 100vw - The view width seems to be the entire browser window including the scrollbar, so you effectively get '100% + scrollbar width' as your width, which gave me a 15px or so blowout. Changing the element's width to 100% fixed it.
Related
I'm new. I've created a <div> inside a <section> and in this <div> I've added two background images using Gridlex. For some reasons, both photo go out of the container. I'd like to do something so both pictures don't go out of the container and take all the space of their Gridlex block.
Anyone, would know what I can do to fix this?
Here the photo:
enter image description here
Here the CSS I've wrote for both images:
.bg-about1 {
background-image: url('../images/about1.jpg') ;
background-size: cover;
background-repeat: no-repeat;
min-height: 500px;
}
.bg-about2 {
background-image: url('../images/about2.jpg') ;
background-size: cover;
background-repeat: no-repeat;
min-height: 500px;
}
<section class="light-bg section-about">
<div class="grid">
<div class="col-5_sm12-middle">
<h2 class="padded-7p center uppercase p-white">Title.</h2>
</div>
<div class="col-7_sm12-middle bg-about1">
<!-- <img class="img100" src="./images/about1.jpg" alt="Art design"> -->
</div>
<div class="col-5_sm12-middle bg-about2">
<!-- <img class="img100" src="./images/about2.jpg" alt="photo"> -->
</div>
<div class="col-7_sm12-middle">
<p class="padded-2 p-white"> my text.</p>
</div>
</div>
</section>
maybe try instead of
background-size: cover;
writing:
background-size: contain;
This question already has an answer here:
Horizontal and vertical photos in same row
(1 answer)
Closed 1 year ago.
How set the same height and keep proportions?
When i set height for example 70vh i have what i want but images are not proportional:
When i set height: auto; images are resposive and proportional but have different height:
Can i combine both and have same height and keep proportions?
HTML:
<main>
<div class="container-fluid">
<div class="row first-row justify-content-center">
<div class="flex-wrap col col-xlg-2 col-lg-3 col-12 col-md-6">
<img src="img/projects/home/test2.jpg" class="img-fluid img">
</div>
<div class="flex-wrap col-6 col-xlg-8 col-lg-6 col-12 col-md-6">
<img src="img/projects/home/test1.jpg" class="img-fluid img">
</div>
<div class="flex-wrap col col-xlg-2 col-lg-3 col-12 col-md-6">
<img src="img/projects/home/test2.jpg" class="img-fluid img">
</div>
</div>
CSS:
.first-row div img
{
max-width: 100%;
height: auto;
}
Try to use image as background image on div element:
HTML:
<div class="bg-cover-center" style='background-image: url("img/projects/home/1.jpg");'></div>
CSS:
.bg-cover-center {
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And don't forget to set width or min-width otherwise div width will be 0 because its don't have content
display: flex to the parent div then assign a height and put the width: auto for the images.
I have a simple code for a simple webpage, but it does not work: for some reason, the background is not displayed. I checked everything in different browsers on different computers. Where do you think there might be a mistake?
.section--map {
padding: 40px 0;
background: #e6e6e6 url("../images/map-bg.jpg") center no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
<section class="section section--map">
<div class="container">
<div class="map">
<div class="map__title">
<div><i class="fas fa-map-marker-alt"></i></div>
<h2>Open Map</h2>
</div>
</div>
</div>
</section>
Did you check if path to your image is correct or it might be that your image type is .jpeg?
Hi been working on this https://codepen.io/junedc/pen/yqXVaR to be responsive but to no avail. If I remove the height or change to percentage the image was lost.
<div class="gallery-height">
<div class="img" style="height:125px; "></div>
<div class="img" style="height:400px;background-image: url('http://13.210.222.166/wp-content/uploads/2018/07/office1.jpg');"></div>
<div class="img" style="height:130px;"></div>
<div class="img" style="height:300px;background-image: url('http://13.210.222.166/wp-content/uploads/2018/07/office2.jpg');"></div>
<div class="img" style="height:300px;background-image: url('http://13.210.222.166/wp-content/uploads/2018/07/office3.jpg');"></div>
If you really have to use it as a background image in the css, here's a trick I like to use in my projects:
url('http...') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
I would like each column to have its own background. I would like it to be fixed height as the columns are but so the width can adapt.
This is my html for the 3 blocks.
<section class="no-pad clearfix">
<div class="col-md-4 col-sm-6 no-pad">
<div class="feature-box bg-hfc">
<h1 class="text-white">Hellfire Citadel</h1>
<p class="text-white">Hellfire Assault<br>Iron Reaver<br>Kormrok<br>Kilrogg Deadeye<br>Hellfire High Council<br>Gorefiend<br>Shadow-Lord Iskar<br>Socrethar the Eternal<br>Tyrant Velhari<br>Fel Lord Zakuun<br>Xhul'horac<br>Mannoroth<br>Archimonde<br></p>
</div>
</div>
<div class="col-md-4 col-sm-6 no-pad">
<div class="feature-box bg-brf">
<h1 class="text-white">Blackrock Foundry</h1>
<p class="text-white">Oregorger<br>Gruul<br>The Blast Furnace<br>Hans'gar and Franzok<br>Flamebender Ka\'graz<br>Kromog<br>Beastlord Darmac<br>Operator Thogar<br>The Iron Maidens<br>Blackhand<br><br><br><br>
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 no-pad">
<div class="feature-box bg-hm">
<h1 class="text-white">Highmaul</h1>
<p class="text-white">Kargath Bladefist<br>The Butcher<br>Brackenspore<br>Tectus<br>Twin Ogron<br>Ko'ragh<br>Imperator Mar'gok<br><br><br><br><br><br><br></p>
</div>
</div>
</section>
This is my css, each column is to have its own background:
.bg-hfc{
background-image:url('../img/hfcbg.png') !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
}
.bg-brf{
background-image:url('../img/brfbg.png') !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
}
.bg-hm{
background-image:url('../img/hmbg.png') !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
}
you can find my currently not working demo here: http://endless-guild.com/wow_progress/show-progress.php
This is what I would like it to look like: http://cl.ly/image/1z3I33281R1b
Ignore the guide lines :)
I did lot of digging around but cant figure out what im doing wrong here. I know the code is awful. I am not very good at this and I would appreciate your help. Many love!
you almost had it right: Try this NEW and fixed HTML:
<section class="no-pad clearfix">
<div class="col-md-4 col-sm-6 no-pad">
<div class="feature-box bg-hfc col-xs-12">
<h1 class="text-white">Hellfire Citadel</h1>
<p class="text-white">Hellfire Assault
<br>Iron Reaver
<br>Kormrok
<br>Kilrogg Deadeye
<br>Hellfire High Council
<br>Gorefiend
<br>Shadow-Lord Iskar
<br>Socrethar the Eternal
<br>Tyrant Velhari
<br>Fel Lord Zakuun
<br>Xhul'horac
<br>Mannoroth
<br>Archimonde
<br>
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 no-pad">
<div class="feature-box bg-brf col-xs-12">
<h1 class="text-white">Blackrock Foundry</h1>
<p class="text-white">Oregorger
<br>Gruul
<br>The Blast Furnace
<br>Hans'gar and Franzok
<br>Flamebender Ka\'graz
<br>Kromog
<br>Beastlord Darmac
<br>Operator Thogar
<br>The Iron Maidens
<br>Blackhand
<br>
<br>
<br>
<br>
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 no-pad">
<div class="feature-box bg-hm col-xs-12">
<h1 class="text-white">Highmaul</h1>
<p class="text-white">Kargath Bladefist
<br>The Butcher
<br>Brackenspore
<br>Tectus
<br>Twin Ogron
<br>Ko'ragh
<br>Imperator Mar'gok
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
</div>
</div>
</section>
You where just missing the col-xs-12 on the classes.
EDIT
Try this CSS as well :)
.bg-hfc{
background-image:url('../img/hfcbg.png') !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
width: 100%;
height: 100%;
}
.bg-brf{
background-image:url('../img/brfbg.png') !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
width: 100%;
height: 100%;
}
.bg-hm{
background-image:url('../img/hmbg.png') !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
width: 100%;
height: 100%;
}
This should do the trick:
.bg-hfc{
background-image: url('../img/hfcbg.png');
background-repeat: no-repeat;
background-size: 100% auto;
}
fiddle.
Thank you all for your help.
Turn out 16 hours of coding is bit too much and I was being absolute moron and not even going to say how badly i messed up haha.
Anyway! The css I was after was this:
background-image: url('../img/brfbg.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
You can see final result here:
Demo