Responsive design issue

  • Christopher
    Christopher
    Newbie
     
    29 points

    Im having an issue with the responsive design when the width of the site is between 420px and 767px.

    The search bar located in my left side bar, is merging with the main center content. Either the side bar should shirk/ adjust to the small width or disappear and the view should change to the mobile view between these values.

    I have also noticed that any sidebar widgets placed underneath the advanced search box are contained within the search box and not in their own container.

    Please can you provide a fix for this issue.

    TIA


    Christopher
    Christopher
    Newbie
     
    29 points

    I am using the practise child theme, the issue seems to becoming from there as the same issue seems to occur on the practise demo.

    On the main demo between 420px and 767px the theme automatically adjusts to mobile view and adds the search link into the main navigation.


    Ying Ying
    Ying Ying
    Newbie
     
    3 points

    You have to set all the display width of widget in the content area as “Inline” You can go to “Page Setup”>> to set them up.

    Hope this will help…


    Christopher
    Christopher
    Newbie
     
    29 points

    Possibly this is an error in the CSS code, but I have managed to solve this issue by editing the following file on lines 1 and 3, by changing the width 480px to 767px

    framework —> css.core_childtheme_styles.css


    @media (min-width: 480px) and (max-width: 979px){ .nav-collapse .nav {float: none;margin: 0 0 0px !important;} .nav-collapse, .nav-collapse.collapse {height: 30px !important;overflow: visible !important;} .core_mobile_menu button, .nav-collapse-mobile, .brand { display:none !important; } }

    @media (max-width: 480px) { #core_menu_wrapper .nav-collapse, #core_menu_wrapper .nav-collapse.collapse, #core_menu_wrapper .nav-collapse .nav { height: 0px;overflow: hidden;margin:0px;} }

    Attachments:
    You must be logged in to view attached files.

    Mark Fail
    Mark Fail
    Super Guru
     
    12,212 points

    thanks for sharing, glad you got it sorted.


    Christopher
    Christopher
    Newbie
     
    29 points

    This should fix the issue for all child themes, the issue doesn’t occur on the main templates.

    Glad I fixed it too cause my site looked terrible from my phone. Now everything is cool.


    Mark Fail
    Mark Fail
    Super Guru
     
    12,212 points

    :)


    Scott
    Scott
    Newbie
     
    65 points

    I am not seeing where to correct this using the Wildfly Child Theme. Any updates available since this was posted? I have trouble with all of my DT theme installs in the same regard.


    Josh
    Josh
    Super Guru
     
    13,775 points

    Hello Scott,
    Please provide url.
    Also you could try using the code Christopher shared above under Theme Setup >General Setup >Custom css

    @media (min-width: 480px) and (max-width: 979px){ .nav-collapse .nav {float: none;margin: 0 0 0px !important;} .nav-collapse, .nav-collapse.collapse {height: 30px !important;overflow: visible !important;} .core_mobile_menu button, .nav-collapse-mobile, .brand { display:none !important; } }

    @media (max-width: 480px) { #core_menu_wrapper .nav-collapse, #core_menu_wrapper .nav-collapse.collapse, #core_menu_wrapper .nav-collapse .nav { height: 0px;overflow: hidden;margin:0px;} }


    Scott
    Scott
    Newbie
     
    65 points

    Yes, I entered that code in custom CSS – it made no difference.

    I am submitting a ticket with the site info, but this is a fix that I need on multiple sites (I use Premiumpress DT A LOT)


Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.