Please help me disable Responsiveness.

7 posts from 3 voices

• Started 3 months ago by hanlinsg
• Latest reply from Dude
• This topic is not a support question

Tags:

No tags yet.

1. 

   hanlinsg
   Member

   Hi Devin/Peter,
   My site looks very odd with the Responsive function when viewed using an iPhone. I'd like to disable this function.

   Thank you very much!
   Jason

   Posted 3 months ago #
2. 

   Devin
   Moderator

   Hi Jason,

   You'll need to delete a lot of css. So in your theme files, go to the css folder and in grid.css delete everything from:
   /* #Tablet (Portrait)
   to just above this line:
   

   /* #Clearing
   ================================================== */

   (all the media query changes)

   Then open layout.css and delete the Media Queries section that starts on line 2038 and goes to 2106. Further down in that file, delete:
   

   /* added with version 1.4 */
   /* All Mobile Sizes (devices and browser) */
   	@media only screen and (max-width: 767px) {
   
   	/* prettyPhoto styling for small screens */
   .pp_pic_holder.pp_default { width: 100%!important; left: 0!important; overflow: hidden; }
   div.pp_default .pp_content_container .pp_left { padding-left: 0!important; }
   div.pp_default .pp_content_container .pp_right { padding-right: 0!important; }
   .pp_content { width: 100%!important; height: auto!important; }
   .pp_fade { width: 100%!important; height: 100%!important; }
   a.pp_expand, a.pp_contract, .pp_hoverContainer, .pp_gallery, .pp_top, .pp_bottom { display: none!important; }
   #pp_full_res img { width: 100%!important; height: auto!important; }
   .pp_details { width: 94%!important; padding-left: 3%; padding-right: 4%; padding-top: 10px; padding-bottom: 10px; background-color: #fff; margin-top: -2px!important; }
   a.pp_close { right: 10px!important; top: 10px!important; }
   
   	}

   That should do it.

   Regards,

   Devin

   Posted 3 months ago #
3. 

   hanlinsg
   Member

   Hi Devin!
   Thanks for your help!

   However, it does not work as expected though.

   Using both Safari and google chrome on an iPhone, the site shows up only the very left portion of it. I can only scroll down and up, i cannot scroll to the right. Also, i cannot zoom in or zoom out.

   How do I solve this?

   I really appreciate your help Devin, you've helped me numerous times!
   Thank you!
   Jason

   Posted 2 months ago #
4. 

   hanlinsg
   Member

   Hi Devin,
   here is a screen capture to better illustrate the issue.

   http://youtu.be/cauDSxqHfhg

   Thanks!
   Jason

   Posted 2 months ago #
5. 

   Dude
   Dude

   Hey!

   Try to add followintg code to the quick css field:

   html, body {
   overflow-x: scroll !important;
   }

   If this doesn't work try:

   html, body {
   overflow-x: auto !important;
   }

   and:

   html, body {
   overflow-x: visible !important;
   }

   Regards,
   Peter

   Posted 2 months ago #
6. 

   hanlinsg
   Member

   Hi Peter,
   I knew it you would help me, thank you very much!

   It's definitely working, but the site still looks very weird.
   Please watch my screen capture.

   http://www.youtube.com/watch?v=hko8hcZk5X0

   Thank you Peter!
   Jason

   Posted 2 months ago #
7. 

   Dude
   Dude

   I see no easy way to fix this issue. In this case it's better if you stay with the responsive design. I noticed that you're missing all media queries in your stylesheets (eg compare http://www.bathmatesingapore.com/wp-content/themes/propulsion/css/grid.css with http://www.kriesi.at/themes/propulsion/wp-content/themes/propulsion/css/grid.css )

   Please revert the changes and the responsive/liquid layout will work on your iphone too.

   Posted 2 months ago #

RSS feed for this topic

Reply

You must log in to post.