How to photos make photos the same size and line up- in one shot!

Style….. just style.

So, I was having trouble with the layout of my website. The photos that I found on the internet were all different sizes, shapes, and jumbled all over the place.

I went to pay James a visit during his office hours on the 7th floor earlier last week, and he showed me the ropes about HTML and CSS.

My problem: 

screen-shot-2017-02-06-at-5-46-16-pm

Screen Shot 2017-02-06 at 5.46.28 PM.png

So with the help of James, I learn a little about about STYLE!

Inside of the <head>, you insert a <style> and inside you put a “img { width:50%; Height:50%; text-align:left; }

These simple tags inside the <head> tag determine the size and alignment of your photos. this saves you a lot of time between you don’t have to individually change all of the setting of the photos.

In other words, “the percentages represent all of your images (so if you change it to 45% then all of your images on your site become 45%). The “Text-align:left; determines the position of your photos (if you change it to center, every image on your page will become centered).

screen-shot-2017-02-06-at-5-52-12-pmscreen-shot-2017-02-06-at-5-52-31-pmscreen-shot-2017-02-06-at-5-52-37-pm

So you go back jumbled and disorganized to perfectly aligned and beautiful! See below!!

screen-shot-2017-02-06-at-5-54-05-pmscreen-shot-2017-02-06-at-5-49-54-pm

First and foremost, I will like to thank god, my wife and kids, my parents, and everyone who believed in me.

-Mike

Advertisements

~ by michaelrivasnyu on February 7, 2017.

3 Responses to “How to photos make photos the same size and line up- in one shot!”

  1. I thought that this was the most thoughtful! This post really helped me with things that I was struggling with! The pictures made it easy to follow as well. You can tell that you put a lot of effort into it and really took your time and effort in making this! It was also witty and clever

  2. Most thoughtful – This is a useful tutorial to improve the appearance of a webpage and to make images easier to view. Combining a sense of humor with an instructional tutorial makes for a very effective, thoughtful post.

  3. This DIY was the most thoughtful! Image alignment is a big issue for me as new coder and probably many of us who are trying to code. I believe cohesiveness is extremely important to your website’s style. This tutorial put style of your webpage at the forefront, and that’s what really matter’s isn’t it? I thought it was quick effective and to the point.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: