Tiffany R. White Blog

Just my little corner of the internet.

100 Days of Code Day 5

2016-10-06 Tiffany White100 days of code

Day 5: 5 October 2016

Today’s Progress: Yesterday was a rough one as far as sleeping. I was up pretty much all night trying to push feature after feature on this e-commerce site as I thought it was due this coming Monday. It isn’t. It’s due the following Tuesday.

So I slept for a good part of the morning. Ate, took a nap, and got back into it.

Hit the ground running after that, trying to move a feature picture to the left and the text to the right using a responsive grid layout[footnote]None other than your friendly Bootstrap[/footnote]. I had the hardest time trying to align the text next to the image the way the top and bottom columns were.

I downloaded a template and pretty much made it my own. I changed the navbar and added some CSS transition-duration and ease for the nav links. I had been having a hard time getting things to work.

Code Newbie to the rescue. I needed to have my jQuery above the Bootstrap in the tag so that the mobile toggle would work. I then knew that I needed to move my style.css file down below the Bootstrap. This was the Bootstrap loads first and then the styles I added to the nav links would actually show up. I did that and Boom. Finally fixed the nav.

Joseph Rex helped to get the image in the second column the way I wanted it. The way the template had it set up:

<div class="row feature">
  <div class="col-md-7">
  <h2 class="feature-heading">You love your iPhone... <span class="text-muted"> and iPhoneography is your passion.</span></h2>
  <p class="lead">Praesent vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
  <div class="col-md-5"><img class="feature-image img-fluid m-x-auto" src="img/moment_lens.jpg" data-src="holder.js/500x500/auto" />

I knew I needed to add the image to the top of the column and somehow get the columns to look the same as they had been.

I struggled mightily with this. But Joseph helped me. We came up with this:

<hr class="feature-divider" />

<div class="row feature">
  <div class="col-sm-5"><img class="featureimage img-fluid m-x-auto img-wide" src="img/zeiss_on_table.png" data-src="holder.js/500x500/auto" />
  <div class="col-sm-7">
  <h2 class="feature-heading">You have discerning tastes in lenses...<span class="text-muted">That shows your sharp, refined eye.</span></h2>
  <p class="lead">DFusce dapibus, tellus ac cursus commodo.</p>


.img-wide {
width: 100%;

The padding was off so I made a sort of hacky move to make it appear like the others. I added padding-top to the CSS:

width: 100%;
padding-top: 4.5rem;

Thoughts: While I still need to hustle, I have plenty of time left to build out the other pages. I was really pushing it, so I am glad I have time left. We will be learning about tables and audio/video in HTML this coming week. We will need to have a table somewhere in the site.

Link to work: As always, you can find the improved site at The Lens Cap

  • © 2019 Tiffany R. White Blog
  • Made with GatsbyJS & ☕️
  • hosted on Netlify | v7.0