Forum Replies Created
-
AuthorPosts
-
Matthew Edmund
MemberI fixed it by basically forgoing the widgets altogether which were, more or less, a pain and messy. The uneven boxes aren't at all ideal and instead opted to use display: table-cell to solve the problem.
My CSS looks like this:
/***** Professional Services Boxes Begin *****/ .serv-master { display: table; /* Make the container element behave like a table */ width: 100%; /* Set full-width to expand the whole page */ border-collapse: separate; border-spacing: 1.5rem 0.75rem; } .serv-box { display: table-cell; /* Make elements inside the container behave like table cells */ width: 30%; padding:20px; } .serv-box p, .serv-row p { font-size: 1.6rem; } .serv-row { display: table-cell; padding:20px; } .serv-row, .serv-box { background-color:#F4F4EF; } @media only screen and (max-width: 800px) { .serv-box { display: block; width: 100%; margin-top: 1.5rem; } } /***** Professional Services Boxes End *****/
That part at the end:
@media only screen and (max-width: 800px) { .serv-box { display: block; width: 100%; margin-top: 1.5rem; } }
Causes it to collapse into stacked block elements on screen sizes smaller than 800px.
And instead of a bunch of widget boxes, I used two text widget boxes with the second containing the HTML looking like this:
<div class="serv-master"> <div class="serv-row"> <i class="icon ion-ios-world-outline"></i> <h4>Web Design</h4> <p>Affordable, custom, handmade websites built on the security and reliability of WordPress</p> </div> </div> <div class="serv-master"> <div class="serv-box"> <i class="icon ion-ios-bookmarks-outline"></i> <h4>Content Creation</h4> <p>Original content for your blog, email newsletters, social media, and more written exclusively for you to engage your audience and bring them back for more</p> </div> <div class="serv-box"> <i class="icon ion-images"></i> <h4>Graphic Design</h4> <p>Logos, social media images, marketing photos, memes, and other eye-popping visuals for web and print</p> </div> <div class="serv-box"> <i class="icon ion-easel"></i> <h4>Media Design</h4> <p>Business Cards, Post Cards, Fliers, Brochures, Posters, and more! With limited availability for emergency last-minute designs on most projects.</p> </div> </div> <p></p> <p><a class="button" href="#front-page-5">Who We Work With</a></p>
The end result is this:
So the answer to my original question is "No, there is no quick way in Genesis to do that. You'll need to use custom CSS or modify the PHP."
Matthew Edmund
MemberSo is it the PHP that is then adding those classes?
Matthew Edmund
MemberEssentially, what I'm seeing, is the only way to do this will be to play with the flexible-widgets classes
/* Flexible Widgets ---------------------------------------------------------------------------------------------------- */ .flexible-widgets .widget { float: left; margin-bottom: 20px; padding-left: 10px; padding-right: 10px; } .flexible-widgets.widget-full .widget { padding-left: 0; padding-right: 0; } .flexible-widgets .widget:last-of-type { margin-bottom: 0; } .flexible-widgets.widget-full .widget, .flexible-widgets.widget-area .widget:nth-of-type(1), .flexible-widgets.widget-halves.uneven .widget:last-of-type { width: 100%; } .flexible-widgets.widget-fourths .widget { width: 25%; } .flexible-widgets.widget-halves .widget { width: 50%; } .flexible-widgets.widget-thirds .widget { width: 33.33%; } .flexible-widgets.widget-halves .widget:nth-child(even), .flexible-widgets.widget-thirds .widget:nth-child(3n+2), .flexible-widgets.widget-fourths .widget:nth-child(4n+2) { clear: left; }
If I'm reading this correctly, I would have to then change the percentages and equations of the nth-child selectors.
In this case, I'd probably want to create an entirely different class for just Widget Area 4 as to not effect the other widget areas?
What I don't understand is how classes like ".flexible-widgets.widget-thirds" are applied to different widgets dynamically?
Matthew Edmund
MemberI know how to inspect CSS and how to use CSS. Per my original post,
Now, I can think of a few ways to do this. But I'd like to see if there is a quick/easy way of doing it, specifically, unique to the theme or Genesis, to reduce time and can be easily replicated in the future.
I was wondering if there was a quick, specific way of handling this inside Genesis or this theme in particular.
Sorry about the link, I mistyped and forgot the S: http://shade.purelightstudioS.com/
Matthew Edmund
MemberYes. But, I would like to have a bit more control over how it's flexible. I was wondering if there is a quick and easy way to adjust how the widgets arrange. Right now, having a bunch of uneven boxes looks aesthetically poor. Is there a way to make the "flexible widgets" flex in a specific fashion?
-
AuthorPosts