It allows me to tweak and style those elements to match the overall style of the theme and is absolutely fantastic in styling different components that has been integrated/glued together, but still produce the same look & feel.
Great developer, awesome community – 11 out of 10, would whole-heartedly recommend.
]]>Also, advanced post layouts such as popular WordPress news themes as this example.
I want to use your theme for my next project but I would like to know if these advanced features will be possible in the near future.
]]>Everyone who thinks “doesn’t work“
Breaking bad is for Css GRID (pointless to use it with Flexbox)
Everyone who thinks “lack of support“
It’s a one-man band, but feel free to support him and you will get premium support.
I’m just a user, no connection between me and the developer.
Have a good day.
]]>As far as i understand there is no option to change the grid layout based on breakpoints. The grid swaps to one column on screens smaller than 769px which can not be changed.
Is a breakpoint based grid planned?
]]>The plugin broke a CSS grid layout. When I turn on CSS minification or combine this code:
#publicacoes {
display: grid;
grid-column-gap: 45px;
grid-row-gap: 45px;
grid-template-columns: calc( 50% - 22px ) calc( 50% - 22px );
grid-auto-rows: minmax(min-content, max-content);
padding-top: 40px;
}
Change to this:
#publicacoes {
display: grid;
grid-column-gap: 45px;
grid-row-gap: 45px;
grid-template-columns: calc( 50% - 22px ); /* second column gone */
grid-auto-rows: minmax(min-content, max-content);
padding-top: 40px;
}
Any idea for workaround?
]]>I am tying to learn and experience CSS grid
so I made this code in header.php
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'garage' ); ?></a>
<div id="site-header" class="grid-container">
<div class="grid-item1">
<h1>David's Auto Service
</h1> </div> <!-- .site-title section1 -->
<div class="grid-item2"> 40 years expeiens </div> <!-- .site-header sectio2 -->
<div class=" grid-item3"> 35</div> <!-- .site-header section3 -->
<div class="gid-item4"><h3>Reparatie & Onderhoud Alle Merken Auto's
</h3> </div> <!-- .site-descripton section1 -->
<div class="gid-item5">hello</div>
<div class="gid-item6">prima</div>
<nav id="site-navigation" class="grid-item7"></div> <!--main-navigation-->
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'garage' ); ?></button>
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
) );
?>
</nav><!-- #site-navigation -->
</header><!-- #site-header -->
</div><!-- #grid-container-->
<div id="content" class="site-content">
and I made this styling in style.css
.site-header {
width:100%;
height: 125px;
border: 1px solid red;
box-sizing: border-box;
background-color:red;
}
.grid-container {
display: grid;
grid-template-columns:auto auto auto ;
grid-template-rows:20px 20px 20px;
}
.grid-item1 {
margin-top:-20px;
padding-left:5px;
color:green;
}
.grid-item2 {
margin-left:-16px;
color:green;
}
.grid-item3 {
color:green;
}
.grid-item4 {
color:green;
}
.grid-item5 {
color:green;
}
.grid-item6 {
color:green;
}
now when I made changes for each item in the grid-container in style.css like changing font color to green it works or has effect untill item 3
but the same changes is not effecting item 4,5,6 in grd-container.
I don’t understand why .it is a grid-container with 6 items so it has the changes to have effect on each item in grid-container from 1 to 6 .
what is the problem here or how I can solve this problem?
my url is to let you have more insight : [ redundant link removed ]
thanks
johan
@media (max-width: 767px) {
.wpcf7-form.cf7-style {
width: 100%!important;
}
}
Any help / suggestions on how to make the form 2 columns for desktop and single column for mobile?
Thanks! ]]>
I want to style a post feed module (Divi theme) so that the first column is 50% width and the rest of the 7 are 25%, creating a grid like this https://www.screencast.com/t/GNJODhIG3
I have this CSS grid code so far, but I can’t find a way of editing it to get the desired layout.
.ds-grid-blog .et_pb_ajax_pagination_container {
display: grid;
grid-template-columns: repeat(5, 18%);
grid-column-gap: 2.5%;}Is there some code I could add like “column-one, row-one: 50%;”
Any help would be much apreciated,,, thanks.
]]>