layout details for mobile view

[Gisella]

Hello Bill,

Moonrise looks great!
There’s just e few minor issues about layout – for which you probably have a quick solution ready. 🙂

1.
I just added a booking form on the contact page.
I pasted the code the guys at Quandoo.it sent me without any changes.

I noticed not that although it’s still possible to use it, on vertical mobile view of the home page only, it cuts a few pixels of the right side.

Do you think it’s better to give different iframe sizes for different screen size?
Or maybe it just a matter of padding, alignment etc?

2.
ìI consequently moved google map back to “standard” position, although I increased its height a little.
On mobile, I see it’s cut on top (can’t tell if it’s just the gray frame or the whole map).
Is it increased map height or because I had reduced empty space on top? (using a solution you had suggested to someone else on this forum)

Thanks,
gisella

[Bill Robbins]

Good Morning Gisella,

Excellent questions. Let’s find answers for you.

1. It looks like there a few set widths in the embed code they sent you. Try changing it be something like this:

<div style="max-width:312px;display:block;padding:0px;margin:0px;position:relative;">
	<iframe src="https://widget.quandoo.it/widget/reservation/merchant/ATXWU?aid=2&#038;countryId=ITA" height="372" style="max-width: 100%;" seamless="seamless" scrolling="no" frameborder="0"></iframe><br />
	<a href="http://www.quandoo.it" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'http://www.quandoo.it', '']);"  target="_blank" style="display:block;padding:0px;margin:0px;position:relative;"><img src="http://admin.quandoo.it/awidget/poweredby.png"  alt="Quandoo" title="Quandoo"></a>
</div>

and see how that works for you. That changes the set widths to max-width so that it can shrink from that size when needed.

---

2. I took a look at the site on my iPhone and the map looks like the attached screenshot. That’s pretty much what I would expect it to be. Are you seeing something different?

Take care,
Bill

Attachments:

1. 

   FD00FC53-8DE6-47B7-A086-268BBFEC3ABE.png
   

[Gisella]

Bill, thanks for your answer.

1. I copied and pasted your code, both on the test site and the “real” site.
I now double checked and updated the page once more but I can’t find anything different.

For some mysterious reasons, on the test site, it still appears cut on the right side as it was before on the home page.
http://a6f.340.myftpupload.com/

On the real site, it looks correct except the banner under it is now wider than the form – both on the home page and the contact page
http://trattoriatajut.com/
http://trattoriatajut.com/contatti/
or attached snapshot #1

2. I noticed I hadn’t written correctly my first explanation above: in this case the problem appears only on the contact page only (not on the home page).
http://trattoriatajut.com/contatti/
or attached snapshot #2

Thanks!

Attachments:

1. 

   1.png
   

2. 

   2.png
   

[Bill Robbins]

Let’s try adding to this to the Custom CSS and see how it goes:

.contact-content div img {
	width: 280px;
}

@media only screen and (max-width: 767px) {
	
	div.contact-map { 
		margin-top: 10px;
	}
	
}

Let me know what you turn up.

[Gisella]

Perfect, Bill!

With new code, booking form is correct on all versions and pages.

I noticed that map became now right on mobile, bit cut on full-size Contact page (weird I hadn’t noticed it before) – so I just extended the margin-top to all versions (not small screens only) and it worked fine!

Thanks once again,
gisella

[Bill Robbins]

Splendid news 🙂

Until next time, take care.

[Author]

Posts