Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #712027

    Hello,

    I’m working on the responsive design on this site: http://www.myredbag.dk/forside and need some help with a few options.

    1. I want the content to be full with from media screen 1024px
    2. I want the main menu to collapse from media screen 768px

    Please help me.

    Best regards,
    Helle Østergaard

    #712031

    Hi GraphicEyeDK!

    1- Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 1024px) {
    .flex_column { width: 100% !important; margin-left: 0 !important; }} 

    2- Please go to Enfold theme options > Header > Mobile Menu and choose to display mobile menu on smartphones. Also, please see – http://kriesi.at/documentation/enfold/switching-to-mobile-menu-on-higher-resolutions/

    Best regards,
    Yigit

    #713211

    Hi,

    1. That doesn’t work.
    2. Yes, now the menu is collapsed, but the cart is hidden behind the menu.

    Best regards,
    Helle Østergaard

    #714528

    Hey!

    1.) Is the the content needed to be in fullwidth when screen width is 1024px, the section with this title ‘Velkommen til My Red Bag’ and has some texts below it?
    2.) The dropdown shows up just fine, can you provide a screenshot how it looks on your end?

    Cheers!
    Nikko

    #714556

    Hi,

    1. Yes
    2. The dropdown works fin, but the cart is hidden behind the menu – screenshot: http://www.myredbag.dk/wp-content/uploads/2016/11/Skærmbillede-2016-11-20-kl.-16.47.48.png

    Best regards,
    Helle Østergaard

    #714695

    Hi!

    1.) Seems to be already in fullwidth, but try to add this code to Quick CSS:

    @media only screen and (max-width:1024px) and (min-width:768px) {
      .page-id-504 #after_full_slider_1 .container {
        padding: 0;
      }
    
      .page-id-504 #after_full_slider_1 .entry-content-wrapper > * {
        padding-left: 50px;
        padding-right: 50px;
      }
    
      .page-id-504 #after_full_slider_1 .entry-content-wrapper > .hr-custom {
        padding-left: 0;
        padding-right: 0;
      }
    
      .page-id-504 #after_full_slider_1 .entry-content-wrapper > .av_one_full {
        padding-left: 20px;
        padding-right: 20px;
      }
    }

    2.) Try to add this code in Quick CSS:

    @media only screen and (max-width:989px) and (min-width:768px) {
      #top #header .main_menu {
        right: 46px;
      }
    }

    Let us know if it works :)

    Regards,
    Nikko

    #714726

    Hi,

    Thanks for your reply.

    1. I’m sorry if I can’t explain myself properly, but that was not what I meant. What I want to achieve is the grey background to disappear and the rest to be fullwidth. Just as it looks at media screen 768 px.
    2. That works now. Only I want the grey line at the left of the cart to disappear.

    Best regards,
    Helle Østergaard

    #714733

    Hi!

    1.) Ignore the code I have above for 1.) and add this code in Quick CSS:

    .responsive .boxed#top {
        max-width: 100%;
    }

    2.) Try adding this code in Quick CSS:

    #header #menu-item-shop {
        border: 0 !important;
    }

    Let us know if this helps :)

    Best regards,
    Nikko

    #714740

    Hi,

    1. I had to add !important to make it work. And to get the header fullwidth too I added:
    .responsive.html_boxed.html_header_sticky #header {
    max-width: 100% !important;
    }

    2. That works just fin now :-)

    Thanks for your help.

    Best regards,
    Helle

    #714742

    Hi!

    Glad we could help. :)

    Cheers!
    Nikko

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Responsive design’ is closed to new replies.