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