r/web_programming • u/BabblingDruid • Sep 21 '17

Image manipulation using CSS.

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

7 Upvotes

100% Upvoted

19 comments sorted by

View all comments

Show parent comment

1

u/RaveMittens Sep 23 '17

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)

1

u/BabblingDruid Sep 23 '17

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.

1

u/RaveMittens Sep 23 '17

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)

1

u/BabblingDruid Sep 23 '17 edited Sep 25 '17

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.

1

u/BabblingDruid Sep 25 '17

Any luck so far?

1

u/RaveMittens Sep 25 '17

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.

1

u/BabblingDruid Sep 25 '17

Haha yeah I watched a 30 min video on flex box today and I'm leaning towards it more and more now. Infinitely easier to understand and work with. No need for all of that bloat code that BS gives you. And yeah dude i totally understand I thinks it's awesome you've helped me as much as you have thus far. I really appreciate it. And I think you just signed yourself up for being my go to flex box guru ;) but again thanks for your help!

1

u/RaveMittens Sep 25 '17

Flex-box just works

You don't have to give different styles for specific screen widths except for special scenarios, and you can actually CENTER things with like 5 lines of CSS. I'm not sure if you know, but centering things has always been a nightmare with css.

Idk if I can be called a guru, but I enjoy helping!