Tagged: , , , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 15, 2017 at 10:15 pm #793555
    davegeipel

    I’ve been struggling with this and feel this should be much easier to work, but it’s not.

    1) Desktop larger than 910.
    I want my larger screen monitor to show our site larger than 910 wide – prefer it to show like the Kriesi site at 1440 or so. However, I’ve followed the theme settings properly:

    Stretched, Responsive and Maximum Container width at 100% (even tested larger sizes but it’s not updating in either FF or Safari).

    2) iPad (I use an iPad Pro)
    Doesn’t seem o allow pinch to zoom. That’s ok with me, but I think having a larger size TABLET viewport is to be expected these days between the iPad Pro 12″ and MS Surface too. Anyway to create a new one and what would those settings be?

    Background: I have created a separate grid.css and placed it within our theme and updated the functions code I read from a moderator who shared it 2-3 years ago. Just don’t seem anything new on this NOR are there any other grids shared in the support forum – spent hours researching this to no avail and hope you can help with these two issue.

    Thanks.

    Dave

    May 16, 2017 at 7:27 pm #794351
    Andy

    Hey Daveid,

    I checked your website but can’t see any issues. No idea what you want to achieve to be honest. Can you provide us more clarity and maybe a mockup showing the results you want to achieve?

    Best regards,
    Andy

    May 17, 2017 at 4:21 am #794588
    davegeipel

    Well, I think if you compare these sites, you will see a noticeable difference. One is from a standard 1920 monitor and the other is landscape from my iPad Pro. I want to make ours as wide as possible and feel the current design is squeezed.

    Hope you can point me in the right direction as the current settings are ineffective.

    Thanks.
    Full Width Site Comparison - FF

    Full Width Comparison - iPad Pro

    May 18, 2017 at 1:08 pm #795851
    Victoria

    Hi Dave,

    For starters, you could try adjusting the size of the container div for the big screens. Here is the code you can use for that:

    
@media only screen and (min-width: 1600px) {
  .container {
    max-width: 1440px;
  }

}

    And then see which other elements you need to have different styles for to make you website better-looking on bigger screens.

    Best regards,
    Victoria

    May 18, 2017 at 7:34 pm #796109
    davegeipel

    I have to say – that was it… UNREAL. Thank you Victoria.

    To help others, I also found a good setting for the iPad Pro (and perhaps Microsoft Surface tablets and others).

    @media only screen and (min-width: 1024px) {
  .container {
    max-width: 1366px;
  }
}

    Really appreciate your help.
    Dave

    • This reply was modified 7 years, 6 months ago by davegeipel.
    May 18, 2017 at 9:16 pm #796161
    Victoria

    Hi Dave,

    Glad we could help and thank you for sharing! :)

    Best regards,
    Victoria

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