WordPress.org

1. gcoulby
   Member
   Posted 3 months ago #
   

   OK this is a tricky one. I have created a third "home-page-widget-area" by adding the function array and placing a duplicate widget in sidebar-front.php (that was the easy bit)

   Now I am trying to make a 3 column layout and I have added this code

   .widget-area .front-widgets {
   	width: 30% !important;
   	margin-right: 3.3%;
   	float: left !important;
   }
   
   .widget:nth-child(2n), .template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
   	margin: none;  /* HERE IS THE PROBLEM YOU CANT HAVE THE VALUE "NONE" */
   }

   The original style looks like this

   .template-front-page .widget-area .widget:nth-child(2n), .template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
    margin: 0 0 1.71429rem;
   }

   If turn this margin value off in firebug the 3.3% right margin activates on all three separating all equally to become a dynamic, three column layout. However, I can't override the style with a margin value of "0" as this doesn't work either and margin value "none" doesn't work either so I can't figure out how to get rid of it without editing the parent which I don't want to do, as this is going to be a master-child.

   Any ideas?

2. gcoulby
   Member
   Posted 3 months ago #
   

   OK here is an update to the situation if i change the site in firebug to this

   .template-front-page .widget-area .widget, .template-front-page.two-sidebars .widget-area .front-widgets {
       float: left;
       margin-bottom: 1.71429rem;
       width: 30%;
   }
   .template-front-page .widget-area .widget:nth-child(2n+1) {
       clear: right;
   }
   .template-front-page .widget-area .widget:nth-child(2n), .template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
       float: left;
       margin-bottom: 1.71429rem;
       margin-left: 3%;
       margin-top: 0;
       width: 30%;
   }
   .template-front-page.two-sidebars .widget, .template-front-page.two-sidebars .widget:nth-child(2n) {
       float: none;
       width: auto;
   }

   It displays three widgets at 30% with a 3% margin which display vertically in mobile view. Then I copy all of the code into the child theme (THE EXACT SAME CODE) and it displays them horizontally but really thin when in mobile view???? so strange this theme.

   Is it possible that the 'responsive behaviour' calls are calling to the original stylesheet. Where are the responsive calls?

Reply

You must log in to post.