I have tried searching as much as I can through google as well as figuring out the issue myself, but no matter what I try(albeit my knowledge is very limited) I cannot figure out how to scale my image with bootstrap.
Basically I have two flex boxes next to each other, one I want to display the image and the other displays a checklist of items. Each column takes up 6 spots so they are even. The issue is I cannot seem to scale my image down, it is a zoomed in version of my background image that I have added.
This is my code:
<!--about section-->
<section id="about" class="bg-info">
<div class="container-fluid">
<div class="row">
<!--about img col-->
<div class="col-md-6 about-picture height-80"></div>
<!--about text col-->
<div class="col-md-6 about-text height-80 px-5 d-flex align-items-center justify-content-center">
This is what I am using in my css file for the image itself
.about-picture{
background: url(../VScode/images/background.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
Any help with this is greatly appreciated! Thank you!!
background-size: cover; will "resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges".
You might want to choose a different background-size (and background-repeat). See: MDN: background-size
Related
So My situation is this, I have a lot of divs... A LOT (over 300) and im using them as part of an interactive background. EDIT:(they all have the same class btw)
The Problem?
Since on mobile I need more divs to fill the page than on desktop, I have too many divs on desktop, meaning you can scroll wayyyyyy more than I want to.
How can I have it so Divs Below a certain point are deleted or (more usefully) how to stop scrolling after a certain amount of pixels.
I literally have no idea how to do this, I've tried experimenting with margins, padding, overflow, position: fixed; but I haven't found a solution so don't pester my "lack of effort"
(some of my accounts have been blocked because I had no legitimate idea what to do and you "cool kids" decided to downvote me enough to get blocked (thanks for that!))
Anyway enough blabbing. Help would be appreciated! Thanks in advance.
You can do 2 things for this:
Wrap all your content in a div and set height to it and overflow-y: hidden.
.wrapper{
height: 1000px; overflow-y: hidden
}
With CSS you can hide the elements after certain number. Like if you want to hide all div after 100
.container .className:nth-child(n+101) {
display: none;
}
This will hide all the divs after 100.
Put all your divs inside a container div and use this css
.container{
max-height:900px; // Set this value to the no of pixel you want to scroll
overflow:hidden;
}
I have set the max-height to 900px cause i want to show only 9 div each div is off height 100px.
SNIPPET
.item {
width: 100%;
height: 100px;
background-color: red;
}
.item:hover {
background-color: yellow;
}
.container {
max-height: 900px;
overflow: hidden;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<!--You cant scroll after that-->
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
</div>
I'm honestly stumped with this bug. My website is working perfectly fine on my laptop browser (at least it seems so). But when I switch to my phone it breaks.
(function animateBG() {
$('#logo-fallback').animate({
backgroundPosition: '-=1'
}, 12, animateBG);
})();
#logo-fallback {
background: url(https://i.stack.imgur.com/6B3gO.png);
background-size: auto 130px;
background-repeat: repeat-x;
height: 200px
}
<body data-gr-c-s-loaded="true">
<div id="header">
<div class="container">
<div class="clearfix" id="logo-fallback"></div>
</div>
</div>
<div id="body">
<div class="container">
<div class="row">
<div class="col-md-9 col-centered">
<h4 class="text-muted">Sorry, nothing here.</h4>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</body>
container div, which contains a div with an id of #logo-fallback. #logo-fallback has a background image that repeats on the x-axis, and the x-position of the image decreases by 1 continuously using a jQuery animation to create a 'scrolling' effect.
This seems to work flawlessly on my computer's browser but when I switch to my mobile the image disappears once it has reached the start of the first repeat and reappears a few moments later.
Also, the image seems to move slower on my mobile...
I hope I made some sense out of my situation.
Kindest Regards,
I am trying to add a slider to an existing page that has a left and right side. The left side has a background image, some text and a clear fix that expands the image to the height of the right side.
When I use Slick Slider and make the left side element a slide, the clear fix no longer works and the height is dictated by the content of the left element.
Here are 2 jsfiddles that demonstrate the problem:
Without slider: http://jsfiddle.net/robmccart/15wrct6g/
With slider: http://jsfiddle.net/robmccart/yj9nerh1/
Here's the code with slider:
<div class="parent">
<section class="right-side"></section>
<section class="slider left-side">
<div class="row" style="background-image: url(http://cpaws.org/engaging-networks/images_donation/Donation-pg-Peel-Watershed.jpg);">slide1</div>
<div class="row" style="background-image: url(http://cpaws.org/engaging-networks/images_donation/Donation-pg-Peel-Watershed.jpg);">slide2</div>
<div class="row" style="background-image: url(http://cpaws.org/engaging-networks/images_donation/Donation-pg-Peel-Watershed.jpg);">slide3</div>
</section>
</div>
CSS:
$c1: #3a8999;
$c2: #e84a69;
.parent {
background: #336633;
}
.right-side {
float: right;
height: 700px;
}
.left-side {
padding-right: 450px;
}
I'm not sure if I'm using the clear fix properly, but it looks like the code injected by Slick Slider is breaking something.
Thanks
I am using shuffle.js on my homepage and I am trying to get my images to responsively resize like in this demo the developer posted here.
Right now I am just using media queries as a workaround, but the results are far from ideal.
Note: the grid is already responsive, what I would like to see is for the images themselves to resize as well.
You must use a CSS Grid to have a nice responsive combined with Shuttle.
Note the classes .span3 and .m-span3 on element
The example of your link is using Bootstrap v2.3.2.
You can use the Twitter Bootstrap 3 which has better semantic as well, or any other grid system.
http://getbootstrap.com/examples/grid/
If you use Bootstrap 3, add the class xs-col-12 and col-4 like so:
<div id="grid" class="shuffle">
<div onclick="window.location.href = 'IEMA.html'" class="xs-col-12 col-4 item Aston shuffle-item filtered ">
<div id="overlay">ASTON</div>
</div>
<div onclick="window.location.href = 'Aston.html'" class="xs-col-12 col-4 item Aston shuffle-item filtered">
<div id="overlay">IEMA</div>
</div>
</div>
If you don't want to include Bootstrap, you can add http://996grid.com/ with same way, using class .grid_4 shoud be fine.
Update
I can make some adjusts for your page have a better grid with shuffle changing for this style for your items when lower than 690px:
#media only screen and (max-width: 690px)
.item {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 223px;
width: 100%;
}
}
To clarify my question: I'm not looking to resize the grid, that already works.
You have already a responsive class attached to the image's container,
I want the images themselves to resize.
then you only need to add max-width:100% to the img element.
In my case :
<figure class="xs-col-12 col-4 picture-item" data-title="The Magic Box">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img style="max-width:100%" src="/the-magic-box.png" />
</div>
</div>
<figcaption>The Magic Box</figcaption>
</figure>
I'm using Foundation 4.3.0 for a project, and am trying to set up Orbit in the most basic way. The javascript and CSS seem to be loading correctly, the images are loading, all the extra elements are inserted, etc. But the main <ul> always has a height of 0px. Here's my HTML:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<ul data-orbit="">
<li><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
</ul>
</div>
</section>
</div>
Here's the HTML once foundation.orbit.js does its thing:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<div class="orbit-container orbit-stack-on-small">
<ul data-orbit="" class="orbit-slides-container" style="margin-left: -100%; width: 400%; height: 0px;">
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li class="active" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
</ul>
Prev <span></span>
Next <span></span>
<div class="orbit-slide-number">
<span>1</span> of <span>2</span>
</div>
<div class="orbit-timer">
<span></span>
<div class="orbit-progress" style="overflow: hidden; width: 54.15%;"></div>
</div>
</div>
<ol class="orbit-bullets">
<li data-orbit-slide-number="1" class="active"></li>
<li data-orbit-slide-number="2" class=""></li>
</ol>
</div>
</section>
</div>
I have tried to put explicit width + height on the images, put class="active" on one slide when generating the HTML, change various Foundation settings, etc, and nothing seems to work.
When I compare the HTML to the live example in the Foundation docs, I notice that in the working version, a z-index is always set dynamically on the slides. On my site, no z-index is ever set. And of course, the ul in the working version has an inline CSS height which equals the height of the slides.
If I manually set the ul height to 300px, everything looks right, except I see no images. If I set div.orbit-container to overflow: visible, I will see the edge of one of the slides to the left of the container.
Any ideas would be much appreciated.
I'm going to try to avoid being overly verbose here.. but this is what I've found and while I wouldn't call this a complete fix, because i'm not sure what started the differences in css the following code solved the problem.
I found this because I have a local environment as well as a dev environment for the site. The local environment was working great, but the production environment had all the issues you mentioned above.
The first issue of course is the generated container div setting the height to 0px. This is strange enough. I manually added the height to the container in the css. The reason all the images are hiding is they're set to margin-left: 100% or some large left margin and they're all positioned absolutely. I wish I could be more help as to why the code differences are present, maybe I'll find more time to investigate further but for now its working.
Anyway, the following was the fix:
.orbit-container { height:250px; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
.orbit-container { height:auto; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
A little upgrade from a previous solution. With this modification, it will be more easy to show the slideshow on a phone and a desktop.
Are you sure the url to the images are ok?
I had the same problem but with 2 of my 3 images and the problem was in the url
I was having the same problem and I've just found that using individual modules (I'm using compass) instead of using foundation.min.css solves the problem, have you tried to use foundation.css (not minyfied)?