Jquery Isotope Masonry Layout leaves gap between elements in Bootstrap 3 - html

I am new to web development, especially Jquery and Bootstrap.
I am trying to include Jquery Isotope to achieve a Pinterest like layout in one of the pages of my yet to be launched dream website, but I have run into few problems here. Since my html code is too long and I am in kind of in a hurry, I have made these .gif images that explain the problem better than my explanation below:
The html elements I want to apply Isotope to come in a loop and seem to load properly upto only a few iterations. After that I can see a lot of gaps between the elements. If I try to resize the browser window, they rearrange themselves and everything is fine again [Please see image 1 to get a clear picture]. Note: This problem seems to exist only with the divs having Images. The text only elements are perfectly arranged.
I want to the elements to re-arrange themselves if I remove any of them, which doesn't seem to work.
Also, the elements are of variable heights and can be expanded in few conditions. I want the elements to rearrange themselves even in this case. [Please see image 2 to get a clear picture].
JS
if ($('#container').length) {
$('#container').isotope({
itemSelector: '.container-item',
layoutMode: 'masonry'
});
}
Please help me solve these problems. Thanks in advance.

It's hard to tell from the code and samples provided, but I think these are from default CSS margins or padding from masonry. When you open this in your browser, use your inspect element tool to see what classes are causing those gaps, then override that CSS. Wish I could be more help, but this is the best I can do with what is provided.

What you are trying to achieve and what i have understood.Please have a look here
http://cssdeck.com/labs/css-only-pinterest-style-columns-layout

Related

How to make HTML page responsive?

I want my webpage to look something like that: https://i.imgur.com/9rOPhRM.jpg no matter what browser I use (opera, chrome, firefox etc), but I don't know how to do that. And more than that, I have a second problem (which I think is bigger) when trying to resize the window or zoom the page. I recorded it: https://www.youtube.com/watch?v=-Qcy-VIRAfY&feature=youtu.be
This is my code: https://justpaste.it/6co8x (the things which are not relevant are bolded).
Can you help me, please?
About your page, I would suggest for you first that you use a css grid or flexbox as an elegant, responsivness way to style your components, and maybe you can start by this article if you don't have ideas about it:
https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228
after that I would suggest that you use some media queries in either your HTML or CSS/SASS code, maybe something like this can help:
https://medium.com/#clergemarvin/create-a-responsive-site-using-css-media-queries-d56e39a892e6
PS: you can get rid of media queries using css grid elements. hope it helps ;)

Bootstrap Columns with height defined as percentage of row width

Complex Grid Layout, Help!
I'm making a responsive website using bootstrap 3.0.2 and can't figure out the layout that is stated in the requirements document for the project. I made an image of what I need, and will give more detail, or update my question, if needed. I am open to any suggestion on how to accomplish this.
The Issue
This image describes what I need the design to look like at three different widths.
I should add, each box will be basically a div with an image, article title and summary within it.
Like to say ... in advanced
Id like to say thanks and apologize in advanced if the question is dumb or the answer is obvious. I have been a dev for a long time, but I'm new to responsive design and I've been banging my head on the wall trying to get this to work
The problematic part of your project is to make two smaller blocks side with a bigger one and make these two 50%. As far as I know, there are no mature cross-browser solutions that would accomplish that without javascript.
You may want to take a look at: Flexbox and for Comrade IE Flexie.
Another approach to accomplish the same could be using viewport dimensions. Just be aware of the browsers support.
All in all, if you can do that, I would suggest just using JS, with a fallback to css that will not break the site's look too much. Having just finished a project with similar requirements, I would just like to say good luck.

Responsive Background Image

I am currently working on a project that involves a background image that needs to be linked specifically to an element within a container div.
The link is: http://idearevolution.ca/clients/jab/
The challenge I am running into is that as I resize my screen the green circle doesn't stay behind the guy. I've run into issues with responsive background images having to work with elements within a contained area in the past, but I've never been happy with my solutions.
The last thing I tried was using Sass to run a loop, adding a media query to update the position every 10 - 20 pixels. I don't like this solution however because of the code bloat it generates.
I am wondering if anyone has run into this issue before and if so, how do you go about resolving it? I've tried a few things but I'm just not happy with any of the solutions.
Any help would be great.
Thanks,
Andrew
Semantics would fix this problem best.
The semantics of using an image is this:
If the Image does not add to the content and explanation of the site,
do not use the image.
So, in truth, this image looks like it should only be part of the design.
Therefore, use the CSS3 Feature of Multiple Backgrounds.

Responsive CSS works on regular browsers, not on mobile... why?

I am trying to put together a simple portfolio site, and have implemented a basic responsive design into the CSS as well (at the very bottom of it), and it behaves just fine - shrinks the 5 columns down to a single column and hides a few elements when I resize the computer browser. But on iPhone/Android browser it doesn't make any difference.
Here is the page in question -> Sample Page
And I can't figure out what the issue is... as in, this should be fairly simple to do, but apparently it's not, and now I'm losing sleep over it... so might as well ask here.
Have you [also] consider the use of viewport meta-tag? Just check This.
I tried loading the site but it seems like your custom js file is not found(404 error).

On a high-level, how would I build a carousel for images?

Can you explain to me, at a very high level, what I would need to build an image carousel for the web, please. You can use data structures and general computer science terminology - but nothing language specific.
E.g:
Store all the images in an array or linked list
When the carousel is loaded, resize the displayed images as X% window size
When the next button is pressed, imageA moves to a hidden html element.
Et cetera.
I hope that makes sense.
Thanks.
You don't want anything language specific but you want to know about carousels on the web and you've tagged this with 'html' and 'css' so I'm going to assume that I can talk about HTML and CSS but I'll try to keep it high level.
If we ignore Flash, then you're left with HTML + CSS + Javascript. The common way to do this is to arrange the images or their thumbnails (don't resize via HTML - its doesn't look good and can increase your page load time) in HTML elements that are themselves contained in one or more layers of wrapping elements. So the whole set of images strung together might be wider than the viewing window. CSS is used to manage their exact layout and to keep them from overflowing the viewing window. When I say window, I just mean the portion of the page in which you want the carousel to appear. Then Javascript is used to change the CSS properties of one of the HTML elements that is wrapping the images, causing it to scroll or shift position.
With HTML5, you have more options, but the above is the way things have usually been done until now.
Finally, if you are going to actually implement this, there are a number of scripts available that will probably meet your needs, but if not I highly recommend using a Javascript framework like JQuery - it will make things much, much easier.
If you want to build it by yourself, one straightforward way would be to have a master div and all the images in it, lined up horizontally. Have the overflow set to hidden on the master div. Then use javascript and set scrollLeft as the user clicks the next, previous buttons.