Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 27, 2015 at 12:34 pm #450533
    lobstahhhhhhh

    Hi, yesterday you helped us with mobile version responsiveness and now web and mobile working perfectly. We had used .responsive .logo img {
    max-width: 75%;
    }

    The tablet view (ipad for example) is terrible. The menu is overlapping logo and the 3 column grid layouts are not shrinking and words covering images etc. We would love your help! Thanks!

    Please see site here http://www.lobstertrail.com/

    May 27, 2015 at 4:43 pm #450660
    Yigit

    Hi lobstahhhhhhh!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 1190px) {
.av-main-nav > li > a {
  padding: 0 7px;
}}

    Regards,
    Yigit

    May 27, 2015 at 5:23 pm #450700
    lobstahhhhhhh

    Hi Yigit! Thank you – that helped but only a small bit when the tablet is held portrait. It fixed the logo overlap but not the three column grid layout seen on pages like this : http://www.lobstertrail.com/eat/1000-lobster-rolls/ it is still not showing the columns correctly. On the landscape version of ipad, logo still overlaps and columns awful.

    The iphone works perfectly and so having hard time understanding issues with tablet. The iphone stacks the columns one on top of each other in portrait and then when flip to landscape …it auto sizes to two columns. Can the ipad layout work similarly?

    Thanks so much.

    May 28, 2015 at 11:35 am #451113
    Ismael

    Hey!

    You can add this in the Quick CSS field to force the grid to resize on ipad, same as the iphone view:

    @media only screen and (max-width: 989px) and (min-width: 767px) {
	.responsive #top .av-masonry-entry {
	  width: 49.90%;
	}
}

    Remove browser cache then reload the page.

    Regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.