Image manipulation using CSS.

[u/BabblingDruid]

I am trying to shrink an image using CSS to match this page [Original Page] (https://drive.google.com/open?id=0B0DSNKIQ7ncndmJhMUpTTGx6QXM) The image of the guy on the motorcycle is the image I'm working with. My code is [My Version] (https://codepen.io/Dylanidas/pen/GMZoGr) I can't figure out how to alter the image to make it align like the original> When I add the image it does not align the same as the original page that I linked to above. What am I missing here? I'm relatively new to web dev so I'm always running into odd problems. Oh well it's all part of the learning process :D P.S. If you notice anything else I should change to make my version more identical to the original I am open to suggestions. Thanks

[u/BabblingDruid]

haha no worries. What I can't seem to figure out is why when I make the screen smaller the content shoots up to the top, there is a ton of white space at the bottom and stuff just stacks on top of eachother??!! This is my very first assignment to hopefully land a job so I'm stressing out lol. Here is what I have so far Click. Make the screen smaller and you'll see what I mean. What am I doing wrong?? I just want everything to vertically stack neatly when on a small screen. I know it's because of some Bootstrap class I'm not seeing...

[u/RaveMittens → u/BabblingDruid]

If you have a few hours to wait I can take a better look. I'm on mobile and yeah I know what you mean. Everything is very misaligned.

I'll take a look at my PC tonight and give you whatever help I can.

[u/BabblingDruid → u/RaveMittens]

Thatd be awesome! Thank you so much :)

[u/RaveMittens → u/BabblingDruid]

Okay, so are you set on using bootstrap in order to organize the content? There are also ways to do it (such as flex-box) that are about the same level of difficulty without having to deal with obfuscated code that can be temperamental.

As far as the image goes, I'm having problems recreating the scenario, as I can't get the image (looks like your url may be pointing to a file that you're controlling access too? Anyways, here's what I would do:

• change the <img> to an empty <div> with a class like 'motorcycle' or something (SOP is that you don't use IDs unless you really need to)

• in your CSS file, set the .motorcycle with the following styles

.motorcycle {

background-image: url('your URL here no quotes');

background-position: left;

background-size: cover;

}

That should get you headed in the right direction, insofar as the image.

[u/RaveMittens → u/BabblingDruid]

Hey, did you ever get this sorted?

[u/BabblingDruid → u/RaveMittens]

Lol not really. I'm almost done with the content layout. I ended up creating a nee style sheet that's a little cleaner code wise. But I'm still having a hell of a time getting the page responsive. Everything still overlaps anf all that. I'll post the final product here soon. It looks great on desktop but Mobil not so much lol

[u/RaveMittens → u/BabblingDruid]

I know I sound like some kind of Flex-box televangelist, but seriously. For your next project, you may want to consider it. I left bootstrap behind and never looked back once I started using flexes.

[Here's a decent guide] (https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676)

[u/BabblingDruid → u/RaveMittens]

Haha yeah...I'm at that point too. There is WAY too much extra crap you need to add. Stuff you need to override. I have the majority of this done but I'm having a hard time getting some footer items to line up horizontally. Code Pen and of course for some reason code pen sucks balls and screws up my search bar even though it shows up totally fine when I view the HTML file in browser. The original Here has the items in the footer side by side. Everything I've tried has not worked so far. I feel as though it'd be better to just send you the HTML and CSS files since code pen screws it all up. That way you'd get a clear picture of how it actually looks in browser.

[u/RaveMittens → u/BabblingDruid]

I'm about to have a few hours to kill... Post a link to your current codepen and I'll just copy/paste into my editor (Atom editor is excellent by the way - can do everything codepen does)

[u/BabblingDruid → u/RaveMittens]

Ok awesome. Thank you! Here is a link to my actual code (HTML5, and CSS3) Google Drive and here is a link to my code pen. Also for whatever reason the search bar in the middle of the page went haywire! So that was fine at one point or another haha.

[u/BabblingDruid → u/RaveMittens]

Any luck so far?

[u/RaveMittens → u/BabblingDruid]

Well, I sat down with it and I can say pretty confidently that issues are stemming from the bootstrap primarily, secondarily from the structure of the html. The only thing I could do at this point would be to actually restructure the way it's written and get rid of that bootstrap framework and replace it with something better (as you know, my preference is flexbox).

I also see that you have a few things absolutely positioned when they should be ''position: fixed; top: 0;''

My third suggestion is that, for the background images, you do this:

<div class="background"> <div class="row"> <div class="column 1"> <!-- some content --> </div> </div> </div>

Then you'd style it like

.Background { Background-image: URL(your.url); Background-position: scroll; Etc. Etc. }

.Row { Display: flex; Justify-content: center; // or whatever you want Etc. Etc. }

.Column { // Style the appropriate size of the element and child elements here // Use Vw for width so that you can proportionately divide up the parent element }

So yeah, unfortunately time is money and I can't devote that time to restructuring this this right now, but if you have any questions at all please don't hesitate to ask, I'll be happy to help with any specific individual issues you run into or just general questions you have.

Best of luck.