Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 20, 2015 at 7:26 pm #476048
    ACNLatitudes

    Hello.

    Thanks again for helping to resolve my other post regarding the use of Enfold and OptimizePress compatibility:
    https://kriesi.at/support/topic/problem-with-enfold-and-optimizepress/

    The CSS code that you provided makes a really big difference, but I just noticed something that I failed to discover prior to having that other support ticket post closed out.

    After applying that CSS code, everything seems to work great on that page up until I get to the smaller mobile version of the page. At that point, the responsive page breaks up a little (in the top area of the page) instead of being in one single column as it should be.

    Would you mind taking a quick look to see if there are any other CSS tweaks that can be made to prevent Enfold from causing that behavior when the page is viewed at the lowest browser resizing (e.g., mobile version).

    Here is the sample page: http://latitudes.org/store/should-you-consider-pandas-ebook/

    Here is the quick css code that is currently being used:

    **********************************************
    /* Fixes conflict between Enfold and OptimizePress with width of pages*/
    @media only screen and (min-width: 960px) { .page-id-18266 .container, .page-id-14779 .container, .page-id-14006 .container, .page-id-15495 .container, .page-id-19098 .container { max-width: 100%; }}

    @media only screen and (max-width: 960px) {
    .fixed-width {
    width: 80%!important;
    margin-left: 50px !important;
    }}
    **********************************************

    Please advise. Thanks so much!

    July 21, 2015 at 1:17 pm #476459
    Andy

    Hey ACNLatitudes!

    how do you want it to look like on mobile? can you send us a mockup/screenshot? because then we can provide you some precise CSS code for you. Please use imgur.com or dropbox.

    Cheers!
    Andy

    July 21, 2015 at 4:10 pm #476591
    ACNLatitudes

    Hi Andy,

    This is how it is supposed to look (if you scroll down to the bottom of the image you will notice that the blue book is visible in the single column version of the mobile page): http://snag.gy/tRNzU.jpg

    However, this is how it currently looks when I have the Enfold theme activated (I inserted a red arrow into the image to show how the blue book is being cut off on the upper right area): http://snag.gy/zr7HV.jpg

    Please advise on how we can get the book to show up in one single column as shown in my first link above.

    Thanks!

    July 24, 2015 at 7:27 pm #478351
    Yigit

    Hey!

    Can you please add following code to Quick CSS 

    @media only screen and (max-width: 480px) {
.fixed-width {
    width: 450px!important;
}}

    Best regards,
    Yigit

    July 30, 2015 at 8:20 pm #480910
    ACNLatitudes

    Hi Yigit. That worked very well. Everything is in one column now. The only remaining issue that I see is that the mobile version of that page moves side to side (if you move your finger left to right on the screen of the phone) and it also allows you to zoom out (if you place your two fingers on the screen and then spread them apart), which normally is not permitted on a mobile version of a site. It never did this behavior on this page prior to us activating the Enfold theme. Is there something that needs to be added into the CSS to prevent that from occurring? Thank so much.

    August 3, 2015 at 1:23 pm #482075
    Ismael

    Hey!

    I checked the page and the markup is quite different from the default markup of the enfold theme so I assume you’re using a third party plugin to build the page. Please contact the plugin author regarding this issue.

    Regards,
    Ismael

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