Announcement

Collapse
No announcement yet.

Question: Genesis Extender, responsive css issue.

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Question: Genesis Extender, responsive css issue.

    Genesis Extender, responsive css.

    I am currently using Genesis Extender with The Genesis-Sample child theme. The default css for .entry is as follows:

    Code:
    .entry {
      margin-bottom: 40px;
      padding: 50px 60px;
    }
    The child theme adapts this padding when you view it on a mobile device, this way you do not have big borders on a small device. However when you change this code in the css editor within Genesis Extender the css no longer adapts and you get the same borders on the mobile device.

    Why is this, does the Genesis Extender not adapt the css so it is dynamic in the same way?

    You can see an example here: http://japaneseacupuncture.london and test the site with this: http://quirktools.com/screenfly/

    For reference I have tested this on actual mobile devices. The new css I am using in the css editor is as follows:

    Code:
    .entry {
        margin-bottom:40px;
        padding: 30px 40px 50px 40px;
    }
    Am I missing something? Any help would be greatly appreciated.
    Last edited by lrs; 06-10-2015, 11:55 AM. Reason: adding tags

  • #2
    The child theme adapts this padding when you view it on a mobile device, this way you do not have big borders on a small device
    Yes, it does this by adding rules in media queries, like this one (notice .entry):

    Code:
      .archive-description, .author-box, .comment-respond, .entry, .entry-comments, .entry-pings, .sidebar .widget, .site-header {
            padding: 0;
     
     
      }
    When you add CSS in Extender, it comes AFTER everything that is in your childtheme´s CSS because it has to overwrite.
    You created a global rule there which is always true and will overwrite your childtheme´s media query, too.

    There are two possible solutions:
    - If you want it to be true for only big screens, just put your new rule in a media query in custom CSS (I would recommend that).
    - Or add the code above in Extender, too, again (media query).

    Comment

    Working...
    X