Wedding Website

Due to the limited numbers of physical invitation letter added with the logistics difficulties, we decided to make a wedding website for our marriage event, and it turned out good. We liked the process of making the website and adjust the look. Personally, I learned some techniques and applied it in the website, like a technique to make a columned post. Haha! I’m proud.

However, it turned out that columned post is not very much nice to look at in the mobile version of the web. I just forgot that most people open the site from their smartphone. Then, I thought I had to discard these columns and made it simpler for mobile.

But I just feel sad to throw away the code. By thinking that maybe some of you need these codes, I will just paste them here.

<div style="width: 35%; padding: 0 10px 0 0; float: left; text-align: right;">
<h2><strong>Akad Nikah</strong></h2>

December 27, 2016
07.00 - 08.00 WIST
Masjid Nurul Iman
Pondok Harapan Indah,
Malang, Jawa Timur</div>
<div style="width: 60%; padding: 0 10px 0 0; float: right;">
</div> <div style="width: 100%; padding: 0 10px 0 0; float: right; text-align: justify;"> <hr /> </div>

You can see that a row can be divided into a number of columns by setting the proportion of the column. Above, I put 35% for the text and 60% for the Google Maps (and basically 5% for the space). And when you want to have single column again, you can just set the proportion back to 100% again.

Above code will look like this:

Akad Nikah

December 27, 2016
07.00 – 08.00 WIST
Masjid Nurul Iman
Pondok Harapan Indah,
Malang, Jawa Timur


So basically  this look is OK if you see the site with your PC, but will look like a mess if you open the site from the smartphone.

Lesson learned is that you cannot underestimate mobile site. It might be the most opened version of your site and it wouldn’t be nice not to pay attention to it.

See you!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

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

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s