Hi,
I’m constructing my website according to my friend’s website (reference website)
Somehow I found out my website is not as responsive as his.
Please take a look:
Reference site:http://www.myguitarfriend.com/
Mine:http://beracahcafe.com/
On iPhone I did the screenshots as following
reference:http://beracahcafe.com/wp-content/uploads/2017/01/reference_phone.jpg
mine:http://beracahcafe.com/wp-content/uploads/2017/01/mine_phone01.jpg
http://beracahcafe.com/wp-content/uploads/2017/01/mine_phone02.jpg
The differences are:
1. I can’t see the whole headling photo as his
2. The masonry gallery in my website shows only one column but not 2 columns as his
please give me some advices.
Any one any suggestions, please?
Hi,
you can use this code to control your background image on iPhone screen size:
@media only screen and (max-width: 767px) {
div#av_section_1 {
background-size: 190% 100% !important;
background-position: 35% 89% !important;
}}
and adjust as needed.
Best regards,
Andy
Hello Andy,
Thank you for your reply.
I’m a bit confused, should I paste your code on my quick CSS column?
I’ve applied it but can’t see any difference on my phone.
Please take a look and five me more suggestion.
Thanks!
Hi,
yes, sure, use Quick CSS field for custom code. Adjust values as needed. Make sure browser cache is cleared. Check on another mobile phone as well.
Best regards,
Andy
Hi there
I am getting more and more familiar with the css language.
I will make my questions more specific afterwards.
Thanks