We Keep Coding

How to properly attach an SVG image to a Bootstrap 4 Carousel with CSS

I have a Bootstrap 4 Carousel, which works great, and I'm trying to add a wave (png) effect to the bottom of it with CSS. It works, but it's unreliable in fitting to the width of the carousel, and from the image you can see it's not taking up the full width. How can I get the wave to reliably fill the width (while being responsive)?
I've learnt some CSS in the course I'm doing, but with this, I'm at the point where I'm just fiddling around with it, as logic is no longer prevailing. I have previously set the width over 100% but it is still unreliable, and even the current height & width is actually a skewed view of the wave before it's been rendered. I've attached a copy .svg below.
The HTML
<div id="itCarouselControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner carousel-wave">
<div class="carousel-item active">
<img src="./img/carousel/image001.min.jpg" alt="...">
</div>
<a class="carousel-control-prev" href="#itCarouselControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#itCarouselControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
The CSS
.carousel-wave {
position: relative;
}
.carousel-wave:before {
display: block;
box-sizing: border-box;
position: absolute;
content: '';
bottom: 0;
left: 0;
width: 100%;
height: 8%;
z-index: 99;
background: url('../img/carousel/carousel-wave-lower.svg');
background-size: cover;
background-repeat: no-repeat;
}
I don't have enough points to post an image, so copy of what it is doing can be found here
Here's a copy of the .svg
I'd like the image/wave to fill the width of the parent, and have it work in a responsive design. Or is JavaScript required to resolve the issue?
Or as another approach, is my .svg too large? it's 1920px x 73px. Will making it much smaller and let it stretch help perhaps?
Thanks heaps!

It turns out the <path> element in your SVG is not flush with the left and right edges of the viewbox. This is the reason why you have empty spaces on the left and right of the pseudo-element when you overlay it on its parent element:
If fixing the SVG is not an issue, then you will need to artificially increase the width of the pseudo element so that the empty left and right edges will be hidden:
.carousel-wave {
position: relative;
/* Demo styles */
background-color: #000;
color: #fff;
width: 100%;
height: 150px;
margin-bottom: 10px;
}
.carousel-wave::before {
display: block;
box-sizing: border-box;
position: absolute;
content: '';
bottom: 0;
left: 0;
width: 100%;
height: 40px;
z-index: 99;
background-color: red;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 112.3"><path d="M1920 54v58.3H0V57.7c156.2-21.8 482.1-24.9 853-4.5 20.7 1.1 41.3 2.3 61.7 3.6l.1-.3c13.8.9 27.6 1.8 41.6 2.7 25.7 1.6 51.7 3.1 78.1 4.6 84.5 4.7 166.7 8.1 245.1 10.3 266 7.7 488.1 2 608.5-14.9 11.6-1.7 22.3-3.4 31.9-5.2z" fill="#fff"/></svg>');
background-size: cover;
background-repeat: no-repeat;
}
.carousel-wave--fixed {
overflow: hidden;
}
.carousel-wave--fixed::before {
width: calc(110%);
left: -5%;
}
<div class="carousel-wave">Original</div>
<div class="carousel-wave carousel-wave--fixed">Fixed</div>

Background scrolling with open modal

I am frustrated. Really frustrated fighting the issue of background scrolling when a modal is open on mobile.
Scenario
I open a modal on mobile.
Add a .noScroll class to the body in order to prevent background scrolling. Alas, the body in the background scrolls when a modal is open. Trying to tap/move slowly on the modal sometimes starts the scrolling in the modal, which is the desired result.
I need the body to stay in position, so no positon: fixed or absolute
I have <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
I have tried setting top: document.body.getBoundingClientRect().top+"px" i.e. resolving the issue via JS
CODE:
HTML
<div id="galleryItem" class="modal_menu_item flexCenterX flexCenterY" style="display: flex;">
<div class="modal_overlay"></div>
<div class="modal_food_inner flexParent flexColumn">
<span class="modal_close"><i class="fa fa-times" aria-hidden="true"></i></span>
<div class="modal_food_info flexParent flexColumn flexCenterY">
<h2 class="modal_food_info_title noMargin noPadding text-center">Keema Samosa</h2>
<hr>
<p class="modal_food_info_body noMargin">Crisp pastry filled with minced lamb, potato and peas served with homemade chutneys</p>
<hr class="optional" style="display: block;">
<span class="menu_food_item_priceContainer text-muted flexOne noPadding">€5.50</span></div>
<img src="/pictures/55/vzrw5siuzogdeul8yaznqq4f.jpg" class="img-responsive modal_food_poster"></div>
</div>
CSS
body.noScroll {overflow: hidden;}
.modal_menu_item {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
z-index: 9999999;
-webkit-overflow-scrolling: touch;
}
.modal_overlay {
background-color: rgba(0, 0, 0, .6);
position: fixed;
width: 100%;
height: calc(100vh + 80px);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.modal_food_inner {
position: absolute;
top: 10%;
left: 0;
right: 0;
margin: 0 auto;
}
This issue seems a common one for mobiles. Though, at this point I'm somewhere between misery and desperation.
Help a programmer – Save a life

When you adding this class .noScroll try to add in css when you adding this class when open modal
body.noScroll {
overflow:hidden;
}

vertically centered an image, based on the container height

edit:
http://eclassified.my/service/242/9d3a89c9-09ae-49a5-ae8c-a4c3070c7ead
How can I vertically centered an image, based on the container height.
Given the container height is fixed, and the image size is dynamic.
Currently only top part of the image is shown as we use overflow: hide;.
Thanks

You can set the image CSS to height: 100%.
Please provide some codes, so that we can help you further with your problem.

Photoshop
The easiest solution is obviously photoshop here; you can just resize the images.
CSS
You can use the CSS property background-image for this. The img tag is not made to hide parts of the image, only to resize.
To do this, you can use the following example:
background-position: 0px -60px;
That property is the key to create a background image that fits in your slideshow. However; you will need to manually change that for all images.
Example for you to use background-position:
.slider-nav-crop4 {
/*this is your image with ~60px white space above */
background-image:url('http://eclassified.my/ec_admin/upload/service_upload/draft-guwz8z2ux1.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 0px -60px;
}
<div class="crop-image slider-nav-crop4" style="border-radius:8px;display:inline-block;width:400px;height:300px;">
</div>
Positioning the image
This is actually a hack that can be set per image, but it could be a little tricky.
You can position the images absolute, give them a negative top setting and make the images larger then the container, setting overflow:hidden.
example
.item .crop-image {
height:200px;
position:relative;
overflow:hidden;
}
.crop-image img {
position:absolute;
top:-40px;
height:300px;
}
<div class="carousel-inner carousel-inner1" role="listbox" style="border-radius:8px;">
<div class="item item1" style="border-radius:8px;">
<div class="crop-image slider-nav-crop4" style="border-radius:8px;">
<img src="http://eclassified.my/ec_admin/upload/service_upload/draft-bxkh1mt89q.jpg" alt="Second Slide">
</div>
</div>
<div class="item item1 active left" style="border-radius:8px;">
<div class="crop-image slider-nav-crop4" style="border-radius:8px;">
<img src="http://eclassified.my/ec_admin/upload/service_upload/draft-guwz8z2ux1.jpg" alt="Second Slide">
</div>
</div>
<div class="item item1 next left" style="border-radius:8px;">
<div class="crop-image slider-nav-crop4" style="border-radius:8px;">
<img src="http://eclassified.my/ec_admin/upload/service_upload/draft-83ytvl4obn.jpg" alt="Second Slide">
</div>
</div>
</div>

Lets say your code is,
<div class="image">
<img scr="Image_path" alt="" />
</div>
CSS
.image{
position: relative;
}
.image img{
margin: auto; //horizontally align center
position: absolute; //vertically align center
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Hope this will work.

Method 1:
container {
display: table;
vertical align: middle;
}
img {
display: table-cell;
vertical align: middle;
}
Method 2:
container {
position: relative;
}
image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Method 3:
container {
height: 300px;
line-height: 300px;
}
In css vertical alignment is a very discussed topic, this is 3 of many examples. Use the best for you.

Bootstrap | URL with hash breaks styles

I am working on a Bootstrap-project with some anchors-links. After clicking them my css doesn't work anymore.
HTML:
<a class="navbar-brand" href="#SectionID">GoToSection</a>
<div class="jumbotron">
<div class="container">
<h3 id="SectionID">Section With ID</h3>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
CSS:
.jumbotron::before {
margin-top: -13.4505%;
top: 0;
transform: rotate(-7.73deg);
transform-origin: 100% 100% 0;
}
.jumbotron::before, .jumbotron::after {
background: white none repeat scroll 0 0;
content: " ";
display: block;
height: 0;
padding-top: 13.4505%;
position: absolute;
right: 0;
width: 100.917%;
}
*::before, *::after {
box-sizing: border-box;
}
.jumbotron::after {
top: 100%;
transform: rotate(7.73deg);
transform-origin: 100% 0 0;
}
.jumbotron {
overflow: hidden;
position: relative;
}
You can see it in this fiddle.
Afer clicking on 'GoToSelection' the .jumbotron looses it's padding-top. When I disable and then enable the property with firebug it woks again.

There is nothing wrong with CSS or HTML.
The jumbotron is not loosing its padding either. What's actually happening here is that. when you click on the link "GoToSection" which has a href value "#SectionID", it is actually scrolling to the
<h3 id="SectionID">Section With ID</h3> .

Display none takes up space

I'm having some trouble with my Pagination nav that is display:none. When I check on inspect element it takes no space, but for some reason, where the pagination nav is, there's an empty space that is not supposed to be there.
I've tried adding overflow:hidden, visibility:none, height:0, but none of it it's working.
Maybe it's something to do with position relative and absolute, I don't understand it very well yet.
themeexp1.tumblr.com
Edit: It's not the 14px margin, it's a much bigger margin
Empty space: http://postimg.org/image/hiixhonoh/
HTML
<div id="content">
<div class="container" id="{postID}">
<div class="container-overlay"></div>
<div class="photo inner">
<a href="{permalink}">
<img src="{block:indexpage}{PhotoURL-500}{/block:indexpage}{block:permalinkpage}{PhotoURL-HighRes}{/block:permalinkpage}" alt="{PhotoAlt}">
</a>
</div>
</div>
<nav id="pagination">
<ul>
{block:PreviousPage}<li>Previous page</li>{/block:PreviousPage}
{block:NextPage}<li><a id="nextPage" href="{NextPage}">Next page</a></li>{/block:NextPage}
</ul>
</nav>
</div>
CSS
#content{
margin: 0 auto;
position: relative;
}
.container{
margin-bottom: 14px;
}
.container-overlay{
width: 100%;
height: 100%;
opacity: 0;
position:absolute;
}
.icons{
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
text-align: center;
}
#pagination{
display: none;
position: absolute;
}

It's hard to tell what you want without a demo, but there is space at the bottom because your .container div has margin-bottom: 14px;.
Example Fiddle