first a link to the site through github http://torgian.github.io/website-dev/gallery.html
Apologies for any spelling mistakes, been working on this for several hours today.
This is directly to the gallery.
UPDATE#2
Further updated code. HUGE thanks to msfoster for setting me on the right path. Amazing how simple the fix was... I just didn't know what it was! Ahahaha xD
slams down sake I feel like I want to run up a mountain now... but it's 10pm here in Japan, so I'll wait till tomorrow.
Code block coming up with fixes.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 image-wrapper"> <a href="img/nasarow-fo-to1.jpg" class="img-thumbnail">
<img src="img/nasarow-fo-to1.jpg" class="img-responsive img-height">
</a></div>
The above was a list of 7 image divs, separated into two rows. That was my first problem. So I removed the second row, but still had a problem with images not staying in one uniform row.
So I next put in this CSS:
.image-wrapper {
height: 300px;
width: auto;}
It took some experimenting to get the height and width right, but found that if I let the width to AUTO and kept the height at a fixed rate, the images were still responsive to viewport size and stayed in the same uniform row.
Gods that was hard.
I'm not sure if this is a permanent fix or not, but I will be revisiting it in the future when I add more galleries.
I'm using bootstrap to create a gallery with the grid system. Unfortunately, I've been trying to get things to line up correctly for the past few days. I cant quite seem to get clearfix to work correctly, I don't know if I'm putting the code into the wrong spot into the html or not.
Also tried nth-child code, but I'm stuck on that as well.
I'll continue to research as I wait for answers, but could definitely use some help.
Suggestions?
In CSS I have the height limited to 300px. You can see that some of the pictures are higher than others, and I think this is what's causing the break, but just cant figure out how to keep the pictures from dropping down to the next row instead of having the 2 or 3 pictures I need in each row.
Background: student of HTML and CSS right now. Updating my site as I go through Treehouse courses.
The reason it breaks is the fact that you create a new row for every third image.
# # #
will break to
# #
#
And then the next image is within a new row again:
# #
#
#
Put all images inside one row and they will breake according to the col-x-y you set for each image.
Related
I do hate to keep asking questions. I have been trying to add code to my website. No matter what code I add, none of it works. I have changed the names of the CSS names thinking that would work but it fails.
Currently I am trying to add in some image gallery blocks. I am on w3 schools and it works.
https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery
I bring the CSS and code to my website and it looks like this:
https://postimg.cc/image/ifn4dsqrr/
I have tried so many card and block codes and they all either mess up my homepage or ruin the css and I have to revert back to the previous version.
Over the last 2 days I have spent 6 hours trying to get 4 little responsive blocks with image background and text overlay to simply work in between 2 banners.
Here is a link to my test store where I am building out a homepage:
http://newdev-vitavibe-com.3dcartstores.com/
I am determined to learn why. I opened up a request to pay someone to build this homepage for me. I had lots of offers but I really want to learn how myself.
If you are willing to use bootstrap you could put them in containers, I linked below the documentation for this. Bootstrap will make your life a lot easier when it comes to grids, saved my butt plenty of times.
https://getbootstrap.com/docs/4.0/layout/grid/
Inspecting the html of your site, a saw that what you want could be accomplished with the following html structure
<div id="fullWidthBlock" class="fullWidthBlock2">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div id="fullWidthBlock">...</div> <!-- all the div.gall where here -->
Note that the <br/> between the two div#fullWidthBlock where removed.
And dont repeat the id attribute it is meant to be unique in each html document.
Thats the page with the changes:
Take a look at "!important" keyword in CSS. You should use it like that:
#smth { color: red !important; }
I am just learning to code and have been looking everywhere for an answer on this one and for some reason cannot find anything.
I noticed that it seems to be common practice to put an image inside of a container or wrapper. For instance, rather just having:
<img src="url"/>
Everyone seems to be in agreement that it needs to be this way:
<div class="container">
<img=src"url"/>
</div>
What is the purpose of wrapping the img inside of a div in this way? It seems to have something to do with "responsive design", but I'm not 100% sure. Is it just so that we have something to size the image relative to, rather than using definite sizing like pixels on the image selector in css? The more I think about it as I write this, the more it seems to be the right answer, but I'm not sure if there's something else I'm missing on this one.
Any insight would be very much appreciated. Thank you.
unfortunately there is no "single" correct answer for this.
There can be many reasons as to why one would wrap any element in another element, it is not specific to <img /> tags :)
In your question I read something like this (converted to real world example):
I see that it is common practice to put a frame around a photo.
Where the "frame" would be the wrapper element, and the photo would be the <img />.
Looking at it this way might make it seem more clear. The photo is the most important part, technically speaking you don't need a frame to show the photo. If you have just a photo, you won't be able to hang it on your wall without damaging it by driving a nail through the top or applying some tape. If you have a frame though, you can make that photo take up any amount of available space within it, you can use the clip to hang it on a wall and if you put multiple photo's in the frame, you can move them all at once since they are in the same frame.
The reason most people put that image in a "container" is because they get some sort of advantage out of it over using an image alone, this could range from aspect-ratio locks to relative positioning. In some cases, a wrapper is required to achieve certain (notably more complex) animations as well.
Websites are built out of "logical" pieces that, together, form a website. The individual pieces are all "frames" that "flow" together to create any page layout you see on every website.
It is merely a structural way of thinking, if the purpose of that image was to be used as a background image for the entire page, a better alternative would be to use CSS background-image property on the <body> tag and not use the image at all. But if the image is meant to be part of a smaller part of your website, it should probably be contained as appropiate.
This answer is in no way a guide to go by, nor a ruleset or anything like that, they are just the thoughts of another developer. There are countless reasons for wrapping an element and this answer doesn't even cover 0.0000001% of those cases. I'm just saying -- there's no specific reason to do or don't here.
My HTML code is organized in this way:
<div class="Container">
<div class="Card"></div>
<div class="Card"></div>
<div class="Card"></div>
<div class="Card"></div>
<div class="Card"></div>
</div>
And my CSS is organized as such:
.Container
lost-utility clearfix
.Card:first-child
lost-waffle 1 1 15px
.Card:nth-child(n+2)
lost-waffle 1/2 2 15px
The result looks like the following:
My issue is that I am trying to get the first div to span 100% of the width, the way it shows in the image, and the rest of the divs to display 1/2 the width. I do not know how to get that second div to the left instead of to the right, and then the third div to the right and up, etc... Basically all the divs after the first div needs to be shifted by 1. I haven't been able to figure this out. Any help would be appreciated.
The issue here is caused by the cycle that LostGrid. Because LostGrid uses :nth-child as the means to select which elements to style, the top "Card" is the first in the cycle, and then the second "Card" takes the second place...when in your layout the second card should start the cycle instead of being second.
There are three options I came up with quickly to solve this.
Option 1
Use LostGrid and have containing divs around the different cards.
Option 2 Not use LostGrid but instead use the math it provides and create the layout in vanilla css.
Here's a CodePen with the three options: http://codepen.io/peterramsing/pen/YWrrjv
I'd lean towards Option 2 as LostWaffle is designed for equal card sizes.
Option 3? I included a third option. It works but it has some excess css that is outputted. But it's an idea.
I haven't run into an issue like this with LostGrid yet as I either use Vanilla css for this or would use containing divs. LostGrid is an amazing tool to use for creating Grids and it's built to help enhance the existing means that css has for creating grids. There are various times when LostGrid isn't the tool to use and with PostCSS it's great because it doesn't add bloat if you only use it a handful of times.
This might, however, be a possible feature add for LostGrid to have a bit more control over the cycle. I'll think on it a bit more.
Hopefully that helps and be sure to let me know if you think that cycle should have some additional customizations for it in later releases.
Since I can't really figure out where the problem is the cite is here
I'm sure most people know ctrl-u will allow you to see the coding.
The scroll bar should move the content in the box.
Any suggestions are helpful but please don't be rude
The scrollbar is transparent but it should wok like the one on this page
Based on what I'm currently seeing - your problem is that you have two separate <div id="entries"> divs. The second one (line 1060 of your compiled source, as I'm seeing it in Firefox) is blank - it contains an empty <div id="post"> and nothing else.
id properties have to be unique - because this one is repeated, the style attributes aren't being applied to it correctly. Simply delete the second <div id="entries">, and your scrollbar will work.
First post here, can't seem to get a narrow enough search to really help me figure this out. So I've edited a theme to look how I want, but the strange thing is that my photosets display as 500px as I want, but single photos display a lot smaller until you go to their individual post (where you see notes on the single post) and I cannot for the life of me figure it out. Same goes for any text posts and god forbid I post any videos. It's all aesthetics but it is driving me crazy! I've looked through all of the block:post/quote/picture etc but I can't find any size variables to edit therein. Any help will be great! Here's the pastebin code for my entire theme's HTML: http://pastebin.com/G1STM1LX
The max width only goes up to 350px from the theme's options but I got the photosets to work by editing them within their own block. I know a bit of HTML but this is driving me bonkers!
looked through your code and figured you could do it with CSS.
The problem is in this part:
#content .entry img{
{block:IndexPage}
{block:if300pxWidth}max-width:300px;{/block:if300pxWidth}
{block:if250pxWidth}max-width:250px;{/block:if250pxWidth}
{block:if200pxWidth}max-width:200px;{/block:if200pxWidth}
{block:if350pxWidth}max-width:350px;{/block:if350pxWidth}
{/block:IndexPage}
{block:PermalinkPage}max-width:500px;{/block:PermalinkPage}
}
You'll notice that there are max-widths set when you are in the blog's index. It resizes the image generated by the {PhotoURL-500} block. A quick fix would require you to change this:
{block:if350pxWidth}max-width:350px;{/block:if350pxWidth}
to this:
{block:if350pxWidth}max-width:500px;{/block:if350pxWidth}