badget

Biggest Sale! Special Offer!

Get 30% discount on all of our single themes with this coupon code: #30%SALE

Hurry up! *Limited time offer*
View all Themes

Responsive behavior on mobiles

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 5, 2015 at 11:51 pm #39281
    Sebastian
    Participant

    Hi guys. I’ve been looking into the forum, but did not find exactly the same request I’ll make.
    Please check this page of my site and reduce the window size:
    http://latinnav.com/?page_id=12

    When the size of the screen is large enough, the look is good.
    But when it gets smaller, the main content only completes 70% of the screen and the sidebar 24%.
    In custom CSS box I have written this:

    .page-id-12 #primary {
    width: 70%;
    }
    .page-id-12 #secondary {
    width: 24%;
    }

    What is it that I’m missing to have it correctly shown in responsive behavior?

    November 6, 2015 at 7:03 am #39298
    Theme Horse Support Team
    Keymaster

    Hi Sebastian,

    Responsive is working fine you donot have to add any Custom CSS.
    Are you trying to display content area and sidebar at a same time.

    Thank you!

    November 6, 2015 at 11:53 am #39319
    Sebastian
    Participant

    Guys, responsive is not working fine. Please double-check, main content and sidebar are not filling 100% of the screen when we display the page in a small window. The sidebar is very narrow when it goes down. I know there’s something missing I should write in the Custom CSS box.

    November 6, 2015 at 7:56 pm #39322
    Sebastian
    Participant

    Hey, I tried a piece of code taken from old comments in the forum.
    This is what solves the problem: adding to the Custom CSS box:


    @media     only screen and (max-width: 1078px) {
    .page-id-12#primary, .page-id-12#secondary {
    width: 100%;
    }
    }

    So everything is up and running guys!
    Have a great weekend.

    November 7, 2015 at 5:45 pm #39349
    Theme Horse Support Team
    Keymaster

    Hi Sebastian,

    You can use below code above code will work only in the page ID 12.

     @media only screen and (max-width: 1078px) {
    #primary, #secondary {
        width: 100%;
    }
}

    Thank you for using our theme.

    November 9, 2015 at 2:46 pm #39407
    Sebastian
    Participant

    Actually, I just want to do it for that specific page.
    Thanks for responding.

    One last question guys:

    is there a way I can make the responsive happen in smaller size?
    Why? well, I wish I can see the original format of Website on my iPad. Now the iPad screen shows same responsiveness that on a small mobile.

    November 13, 2015 at 1:50 pm #39546
    Theme Horse Support Team
    Keymaster

    HI Sebastian,

    To off the responsive features go to Appearance > Customize > Layout Options > Responsive Layout there you can off the responsiveness and have the site as same as the desktop view for small devices.

    Thank you!

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