Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • July 21, 2017 at 11:07 pm #825259
    goldengate415

    Hi there,
    Since 4.1.1….

    The mobile version of my website now looks fine after a lot of work.
    However today at a friend’s house I accessed the website on an iPad pro and I saw that the margins are not working property only in tablet mode. They look fine as before on mobile and desktop.

    Here’s an example of a page where everything is now pushed to the left instead of centered (tablet portrait mode):
    http://imgur.com/a/bKugG

    Here is the link so you can see that page on desktop (looks good):
    Marin County Open Houses

    I also noticed on the site that the margins for pages such as this one are much smaller in tablet mode than in desktop:
    http://www.thomashenthorne.com/304-bolinas-ave/

    Thank you for your help!!!

    Rob

    • This topic was modified 7 years, 5 months ago by goldengate415. Reason: fixed version number of enfold
    July 22, 2017 at 7:55 am #826821
    Mike

    Hey goldengate415,
    Please try this code in the General Styling > Quick CSS field:

    @media only screen and (min-width: 768px) and (max-width: 1024px){ 
.units {
    float: none!important; }}

    Best regards,
    Mike

    July 22, 2017 at 9:26 pm #828471
    goldengate415

    Thanks, Mike, that fixes the first problem but not the second one of the margins being much smaller than desktop view… any suggestions there?

    Thanks,
    Rob

    July 23, 2017 at 9:26 pm #828764
    Yigit

    Hi Rob!

    You seem to have following custom CSS code which is causing the second issue 

    @media only screen and (max-width: 1024px) {
.container {
    padding: 0 10px;
}}

    Please remove it :)

    Regards,
    Yigit

    July 23, 2017 at 9:40 pm #828768
    goldengate415

    Hi Yigit,
    When my developer was trying to fix the issues with 4.1, he added this css:
    @media only screen and (max-width: 1024px) {
    #header {background-color:#ffffff;}
    #header_main {padding: 1%;}
    #avia-menu {z-index: 9999;}
    .responsive #top #header .social_bookmarks { display: block;}
    .responsive #top #header_meta .social_bookmarks li a { border: none !important;}

    Is this the source of the above code you pasted, and should this be changed?

    I actually just emailed him because with 4.1.2 my header is broken again… the second logo (please add 2nd logo support soon!) is jumping outside of the header container on mobile tablet portrait and landscape view per this photo:

    View post on imgur.com

    Can you help sort out what’s going on and are the issues related?

    Thanks!!
    Rob

    July 24, 2017 at 12:38 am #828806
    Yigit

    Hi!

    1- I changed the code i posted above to following one in style.css file 

    @media only screen and (max-width: 1024px) {
.container {
    padding: 0 50px !important;
}}

    2- I adjusted your custom CSS. Please review your website :)

    Regards,
    Yigit

    July 24, 2017 at 12:42 am #828807
    goldengate415

    Thanks… I wish I had better news but I just went to the staging site and the header is actually worse than it was before… now logos are overlapping per this image:

    View post on imgur.com

    Thanks!
    Rob

    July 24, 2017 at 2:17 pm #829009
    Yigit

    Hi!

    When i tested yesterday with new code, logos were displaying side by side. Is your developer working on the site as well? It seems like changes i applied does not exist anymore :/

    Also, login credentials seem to be expired again. Could you please set new ones? :)

    Cheers!
    Yigit

    July 24, 2017 at 4:05 pm #829035
    goldengate415

    Hi Yigit,
    I had to push production back to staging to sync them last night so he could work on the latest site…. I did copy paste the style.css and the custom.css. The logo appeared as above on the Chrome developer simulator as well as actual devices, so I knew it wasn’t working. Let me see if he can get to it today. I don’t understand why it “broke” with 4.1.2…. I’m fearing 4.1.3! ha ha smile

    Rob

    July 26, 2017 at 5:31 pm #830269
    Yigit

    Hi Rob,

    I was checking your open threads. Shall we close this one as well or do you need any assistance on it? :)

    Best regards,
    Yigit

    July 26, 2017 at 5:37 pm #830274
    goldengate415

    Hi Yigit,
    Thank you for circling back!
    My developer is on vacation in Germany trying to work on this… he has the header looking better but says it’s like playing “whack a mole” to try to get everything to work with the new mobile menu setup. Are there any known bugs with the container in tablet mode that we should just wait to 4.1.3 on?

    If you go to the site now, the title bar doesn’t show up in tablet mode (ipad) unless you drag the page down, but then it springs back up like a rubber band and the title bar disappears. This is a good page to see the behavior:

    The header seems to be wider on tablet than before, so not sure if just narrowing the header could fix it?

    Your login credentials are working if you want to take a look… :)

    Thanks
    Rob

    July 28, 2017 at 9:11 pm #831293
    Yigit

    Hi Rob,

    Login credentials did not work :/

    Can you please try adding following code to Quick CSS

    @media only screen and (max-width: 1350px) and (min-width: 1024px) {
.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 203px!important;
}}
@media only screen and (min-width: 1024px) {
.phone-info {
    display: none;
}}

    Best regards,
    Yigit

    July 28, 2017 at 10:29 pm #831320
    goldengate415

    Hi Yigit, thanks!! OK to close this thread…. (but can you help me with my mega menu thread? (smile)

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Enfold 4.1.1 Tablet mode of website now has strange margin issues’ is closed to new replies.