This thread is resolved. Here is a description of the problem and solution.
Problem: Some images displayed in map marker Info Windows (marker popups) are hanging off the right edge of the popup in tablet devices.
Solution: Add a fixed width to the images and include a 15px right margin using the following code:
/* - apply fixed dimensions to featured image to help resize on tablets */
@media only screen and (min-width: 599px) and (max-width: 768px) {
.gm-style-iw .attachment-thumbnail.size-thumbnail.wp-post-image {
height: 150px;
width: 150px;
margin-right: 15px;
display: block;
}
}
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 2 replies, has 2 voices.
Last updated by 4 years, 9 months ago.
Assisted by: Christian Cox.
Hi there,
If you check this page on an iPad: hidden link
(Scroll to bottom to see 'search by map' link).
If you pick one of the properties map pins indicated on the map, the images are ok on some but not on others.
I must have spent over an hour trying to work out why, any thoughts please?
It's fine on the desktop version however the iPad version is not right.
Many thanks in advance.
I added some CSS specific to tablets in the View's Loop Editor CSS panel:
/* - apply fixed dimensions to featured image to help resize on tablets */
@media only screen and (min-width: 599px) and (max-width: 768px) {
.gm-style-iw .attachment-thumbnail.size-thumbnail.wp-post-image {
height: 150px;
width: 150px;
margin-right: 15px;
display: block;
}
}
Basically I added a fixed height and width to the image CSS, added a bit of margin on the right side, and set the image to display:block. This is all in place to help the browser calculate the content size inside the Info Window, which will help fix the problem where some images are hanging off the right edge. Let me know if this isn't solving the problem sufficiently and I will review your comments.
