New Landing › How can we help? › Themeforest Theme Support › Dante › Mobile View – Padding Problem

Viewing 15 posts - 1 through 15 (of 17 total)
1 2
  • Back to forum
    Posted in: Dante
  • October 10, 2016 at 10:34 am #295436
    3lias
    Member
    Post count: 128

    Hi.

    In the file …/wp-content/themes/dante/css/responsive.css is at line 612 following code:

    @media only screen and (max-width: 767px)
.fw-row > .container {
    padding-left: 30px!important;
    padding-right: 30px!important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    which adds at mobile view a padding on the left and right which I want to be removed.

    The problem is when adding in my child style sheet: 

    @media only screen and (max-width: 767px)
.fw-row > .container {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

    nothing happen as “!important” is already set.

    How to deal with that without doing anything out of the child-theme?

    Elias

    Attachments:
    You must be logged in to view attached files.
    October 10, 2016 at 4:33 pm #295553
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Hi,

    It think it’s only a question of priority, I think if you place that code in the custom css option it will work fine.

    -Rui

    October 11, 2016 at 2:30 pm #295769
    3lias
    Member
    Post count: 128

    That’s what I have thought as well but unfortunately it’s still not working. What can I do?

    October 11, 2016 at 2:33 pm #295770
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Can you provide me the site url and some admin credentials to have a look?
    Thanks

    -Rui

    October 11, 2016 at 3:19 pm #295788
    3lias
    Member
    Post count: 128

    Unfortunately we have the website still on a staging server which is not accessible from outside the company. Do you think it will work with z-index?

    October 11, 2016 at 4:35 pm #295811
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    wait, you are missing some open and closing brackets. This happens when you copy the code from the browser inspector.
    Try this one

    @media only screen and (max-width: 767px){
.fw-row > .container {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
}

    -Rui

    October 12, 2016 at 8:42 am #295899
    3lias
    Member
    Post count: 128

    You are right there was a missing closing bracket but it’s still not working. What I have found out is the order of the called .css files are important. Normally the child CSS file will be called first and than the responsive CSS file will follow.

    Current – Not working:

    Line 130: <link rel='stylesheet' id='sf-main-css'  href='foo/wp-content/themes/dante-child/style.css' type='text/css' media='all' />
Line 131: <link rel='stylesheet' id='sf-responsive-css'  href='foo/wp-content/themes/dante/css/responsive.css' type='text/css' media='all' />

    Fixed – Working: 

    Line 130: <link rel='stylesheet' id='sf-responsive-css'  href='foo/wp-content/themes/dante/css/responsive.css' type='text/css' media='all' />
Line 131: <link rel='stylesheet' id='sf-main-css'  href='foo/wp-content/themes/dante-child/style.css' type='text/css' media='all' />

    If I switch them around in the browser inspector it actually works! But the order is something you guys have to change somewhere in the main theme right?

    October 12, 2016 at 11:09 am #295933
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    The order is managed by WordPress. Did you tried to place the last code in the custom css options?

    -Rui

    October 12, 2016 at 1:12 pm #295989
    3lias
    Member
    Post count: 128

    Are you sure that the order is handled by WordPress? I think this is theme specific and there must be an option for this. I have tried with your code but as I said before it still doesn’t works unless I switch the order of the called CSS files.

    Again if I switch the order of the CSS files it works as it should be but how can I achieve this?

    October 12, 2016 at 1:39 pm #295999
    3lias
    Member
    Post count: 128

    This may help: http://stackoverflow.com/questions/28809334/change-order-of-css-files-in-header

    October 13, 2016 at 2:10 pm #296257
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    You will still be able to override this regardless of the order, will need a staging site URL to assist further.

    When you add it to Theme Options => Custom CSS, this is output below all other stylesheets so usually this takes priority over the previous loaded styles.

    Thanks,
    David.

    October 14, 2016 at 10:11 am #296440
    3lias
    Member
    Post count: 128

    Hi David,

    I have added the code as you suggested to the Theme Custom CSS/JS area. Not my favorite spot to put code but it seems this is the only way to do it right now.

    When I update the Theme the settings in the Custom CSS/JS area will be still there right?

    Elias

    October 14, 2016 at 10:29 am #296445
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    yes it will. That information is stored in the database.

    -Rui

    October 14, 2016 at 12:05 pm #296473
    3lias
    Member
    Post count: 128

    Ok… great.

    Thanks.

    October 14, 2016 at 12:13 pm #296476
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    No problem.

    -Rui

  • Back to forum
    Posted in: Dante
Viewing 15 posts - 1 through 15 (of 17 total)
1 2

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register