Content looks weird on iPad & iPhone

Hey guys,

I really love the theme. I almost never have any problems with the website on the desktop, but i keep having issues on mobile, both tablet and iphone. Since there is no dedicated editor for the content on mobile, and I don’t have any coding knowledge, I can only fidget with settings and then I go here. I understand that the support team is incredibly busy, but I hope I’ll get help here, because other issues took weeks to resolve here.

I made a simple page for my photo project – mete.photography/symi
Under the full-width slider i have 1/2 text box and 1/2 google map. Then masonry gallery and share buttons. Now, on desktop everything looks great. On tablet google map element looks completely disproportionate to the text (it is set to 16:14 size, so on desktop it matches the size of the text box, which is what i want). I want to put the map under the text only on iPad. How would I do that? Here’s the image fixed with this
/* displaying one column on ipad instead of two */ @media only screen and (min-width: 768px) and (max-width: 1024px) { .responsive .av_one_half { width: 100%; margin-left: 0; }}

On iPhone, the text box has no borders whatsoever, so it looks weird [Fixed by adjusting the padding]. Same with the share buttons – when you press it on mobile the pop-up description goes out of the window (on desktop it’s hover-over buttons). I want to disable the hover-over description on mobile for share buttons (so the press leads directly to sharing) and center the text in the share element (on all devices if possible). (used h5.av-share-link-description {text-align: center;})

Lastly, there is a weird space on iPhone after the slider before text – too much white space. Here’s the image fixed with this .content { padding-top: 5px; padding-bottom: 0; }

Otherwise, the gallery and the page looks great. But i keep having issues on mobile. Thank you in advance for the help.

• This topic was modified 8 years, 8 months ago by mepho.