[Matthew Edmund]

I 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]

So is it the PHP that is then adding those classes?

[Matthew Edmund]

Essentially, 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]

I 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]

Yes. 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?

[Author]

Posts