Tiffany R. White Blog

Dark Mode
Light Mode

100 Days of Code Day 5

October 06, 2016 • ☕️ 3 min read

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">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
  </div>
  </div>
  <div class="col-md-5"><img class="feature-image img-fluid m-x-auto" src="img/moment_lens.jpg" alt="iPhone with lens" data-src="holder.js/500x500/auto" />
  </div>
</div>

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" alt="Zeiss on table" data-src="holder.js/500x500/auto" />
</div>
  <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">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
  </div>
</div>

CSS:

.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:

.img-wide{
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

Share article
LinkedIn

Discuss on TwitterEdit on GitHub


Tiffany R. White Blog

Tiffany White

Blog of Tiffany White. Thoughts on React & web development. My stuff: /uses.