<div class="row">
<div ng-repeat="moive in movies" class="columns large-1">
<a href="#/movies/{{moive.imdbID}}">
<img ng-src="/data/images/{{moive.imdbID}}.jpg">
</a>
</div>
</div>
I am getting json data and viewing the image url as gallery.
Some how ng-repeat create random gap between these images in random column (the same as <br> effect). Its for every 20 images, it does skip a line automatically.
I don't have any custom css implemented except foundation.
What seems to be a problem?
Related
I have bootstrap columns set up with photos and a brief description underneath. Because the photos are different heights the text isn't aligned across the columns and it looks pretty bad. I'm sure this is a simple fix but I just can't seem to find it! Thanks in advance
<div class="row colabs">
<div class="col-lg-6 col-12">
<h2>Megan Reitz</h2>
<img class="collab-pics" src="C:\Users\donal\OneDrive\Desktop\John Higgins Website\Images\megan-reitz.jpg" alt="">
<p class="collab-texts">Long standing research partner into 'speaking truth to power' and 'workplace activism'</p>
<a class="collab-links" href="http://www.meganreitz.com/">http://www.meganreitz.com/</a>
</div>
<div class="col-lg-6 col-12">
<h2>Mark Cole</h2>
<img class="collab-pics" src="C:\Users\donal\OneDrive\Desktop\John Higgins Website\Images\Mark-Cole.jpg" alt="">
<p class="collab-texts">Fellow explorer into the intellectual headwaters of current organizational and management practice</p>
<a class="collab-links" href="https://radicalod.org/">https://radicalod.org/</a>
</div>
</div>
enter image description here
In this you can go for any one below described solution
try to use bootstrap-5 inbuilt classes like "img-fluid"..etc
reference link :- https://getbootstrap.com/docs/5.0/content/images/
either you can set your images to one div as background and use properties like background-position, background-size .. etc
you can set apply common height/width for all image elements with this you can control images & after that texts of it..
I cannot figure out what I am missing here. (Head included for bootstrap reference.)
<head>:
<!-- Bootstrap Complete CSS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"></script>
<!-- Bootstrap Complete JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Bootstrap Complete JavaScript Bundle -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
Problematic code:
<!-- TopGrid -->
<section id="TopGrid">
<div class="row">
<div class="TopGrid-Box col-lg-4">
<img class="Mask" src="Images\Mask Icon.png" alt="Lineart Face Mask">
<h2>Masks</h2>
<p>Our associates will be wearing masks, and you will be asked to do the same while shopping in our stores. </p>
</div>
<div class="TopGrid-Box col-lg-4">
<img class="Hands" src="Images\Hand Cleaning Icon.png" alt="Lineart Hand Sanitizer">
<h2> Hands</h2>
<p>Hand sanitizer will be provided as you enter so we can maintain safer shoe displays. Our asociates will also be regularly using sanitizer as well as washing their hands
throughout the day.</p>
</div>
<div class="TopGrid-Box col-lg-4">
<img class="Surface" src="Images\Surface Cleaning Icon.png" alt="Lineart Cleaning Spray">
<h2> Surfaces</h2>
<p>Our associates will be disinfecting all high-touch surfaces throughout the day, as well as before and after customers.</p>
</div>
</div>
</section>
I am not getting columns at all. Removing the images doesn't affect it, adding a container doesn't affect it, adjusting screen size does not affect it. I'm sure I'm missing something simple, but I don't know what it is.
(There is no CSS currently written for this code, except for the inline bootstrap.)
I've got a 3x3 grid built with Zurb's Foundations framework and on load sometimes these boxes overlap each other. The number of image that load normally and the number that does not is completely random. Sometimes it's just one image, sometimes all of them, etc. It also happens more often when you view the website from http:// instead of locally. Just take a look at the image below.
The boxes are responsive, in such way they decrease in size when the browser gets smaller dan 1200px in width. Therefor a static height of each box isn't an option. They do remain the same ratio (4:3).
How do I make them not overlap each other?
I think the issue is the browser renders the boxes quicker than it can render each image- and therefor doesn't take the height into account.
My code for this part looks like this
<div class="row">
<div class="large-12 large-centered columns">
<div id="grid" class="row">
<figure class="small-6 medium-4 columns item" data-groups='["all", "app"]'>
<img src="images/portfolio/nos/sp-item.jpg" alt="img01"/>
<figcaption>
<h2><span>NOS</span></h2>
<p>5 maanden werken aan een nieuwe NOS app</p>
</figcaption>
</figure>
<!-- 8 more figures like the one above, each is one box -->
</div>
</div>
</div>
I think this is a classic case for a Foundation block-grid. Just change the class from large-3 to large-block-grid-3.
So your code will look like this:
<div class="row">
<div class="large-block-grid-12 large-centered columns">
<div id="grid" class="row">
<figure class="small-block-grid-6 medium-block-grid-4 columns item" data-groups='["all", "app"]'>
<img src="images/portfolio/nos/sp-item.jpg" alt="img01"/>
<figcaption>
<h2><span>NOS</span></h2>
<p>5 maanden werken aan een nieuwe NOS app</p>
</figcaption>
</figure>
<!-- 8 more figures like the one above, each is one box -->
</div>
</div>
You can learn more about Foundation block grid here
I added the .imageLoaded() jQuery plugin and configured it so that only when all images are loaded in the #grid then shuffle.js could load; a plugin that I use for shuffling/filtering the items.
Now, both on reload and clear-cache-full-reload, it works- and is showing correctly.
The problem was that if the plugin is fired before all/any of the image has been loaded, it just gives it a 10px height. Now, by firing the plugin after all images have been loaded, they get shown at their full height.
Strangely though, I applied this suggestion before I changed my grid to a block-grid, as suggested by #Asaf David, it didn't work. Now it does.
++ Credits to #Asaf David, for suggesting the block-grid, although I either can't confirm nor deny this helped. But at least it improved my code, imho.
I was wondering if anyone has any idea how to do the following.
I want to show all the Brands on the site on a grid on a brands page, similar to how products are shown by default but showing brands (the image & name within a panel) that can be clicked through to take users to that brand page.
I had it working for a second but due to thinking it had failed. I changed the Site settings/code and now I cant remember how to get it back to working.
EDIT:
<div id="Container">
%%Panel.Header%%
<div class="bannerimg">
%%Panel.WrapperBanner%%
</div>
<div class="SideBar"><!-- This is desktop only -->
%%Panel.SideShopByBrand%%
</div>
<div id="Wrapper">
<div class="ContentHead CatHead Center">
%%SNIPPET_CategorySortBox%%
<h1 class="title">%%GLOBAL_PageTitle%%</h1>
%%Panel.PageBreadcrumb%%
</div>
<div class="Content Widest" id="LayoutColumn1">
%%Panel.PageContent%%
TEST
%%Panel.GetInTouch%%
</div>
<div class="clear"></div>
</div>
%%Panel.Footer%%
</div>
The "TEST" string is where I had been trying to add various bits of code to pull in all the brands but most of the time when I add any of that code it breaks the page and nothing loads on a page refresh.
It should be enough to just upload an image for the brands (on /admin/index.php?ToDo=viewBrands page) and it should automatically appear on /brands page.
I have a demo site which is located here to give you an idea of what's going on. If you scroll to the bottom where you see the 9 individual posts they are all laid out properly. How ever if you shrink the screen to anything less then 1232px's youll see that the 7th post breaks away from the others and shifts down.
Now I am using default styles to align them as such, using row and then span4. Can any one explain why this happens? And any way to fix it?
Your span totals should add up to 12. Your example site however adds up to more than 40! I don't think there is any defined behaviour for what should happen if you don't use it as intended.
From Bootstrap homepage
"The default Bootstrap grid system utilizes 12 columns"
So the total of your spans must add to 12 per row. ie.
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
<div class="row">
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
</div>
<div class="row">
<div class="span7">...</div>
<div class="span3 offset2">...</div>
</div>