Different Sized Elements in Home Page Widget

[CowgirlRed]

Hello,

I've been wrestling with this problem for a bit and can't get it straight.

Site (using Enterprise Pro theme): http://stage.winecupgambleranch.com/

Problem is located in the home-bottom widget area. There are two text boxes. I need them both on the same line with the image text box in the left third of the space and the text widget in the right two-thirds. The original CSS had the home-bottom widget styled for three columns.

How do you style a widget to hold two elements of different widths?

Relevant CSS:

.home-bottom .widget-title,
.sidebar .widget-title {
margin: -40px -40px 40px;
padding: 30px 40px;
}

.home-bottom {
padding: 40px;
width: 30% 50%;
}

.home-bottom .widget {
background-color: #fff;
color: #000;
border-radius: 3px;
border: 1px solid #ececec;
box-shadow: 0 1px #ececec;
float: left;
margin-left: 2.564102564102564%;
padding: 40px;
}

.home-bottom .widget {
margin: 0 0 40px;
width: 100%;
}

http://stage.winecupgambleranch.com/

[Victor Font]

I wouldn't use two text widgets. I would use 1 text widget and then use Genesis column classes to format the content.

<div class="column-container">
    <div class="one-third first">
        <img src="http://stage.winecupgambleranch.com/wp-content/uploads/2016/05/wgr-home-bottom.jpg">
    </div>
    <div class="two-thirds">
        <p>Winecup Gamble Ranch is a legacy historic high-desert Nevada ranch which produces quality, environmentally-adapted cattle and exceptional grass-fed beef in the northeast corner of the ecologically diverse and beautiful Great Basin area. The ranch represents some of the last of the American West in a modern day frontier, operating on part of the once famous Utah Construction Company ranch which rode under the UC brand on nearly three million acres until the 1940s.&nbsp;</p>
        <p>Today, the Winecup Gamble Ranch remains one of the largest working operations in the country and encompasses nearly one million acres all under the renowned Winecup brand. Over the years, the ranch has undergone many changes, yet stays true to its buckaroo roots tending cattle and coexisting with high desert wildlife like elk and mule deer much as their forefathers did before.</p>
        <p>Alongside, its love for tradition the Winecup Gamble Ranch marries these philosophies with an appreciation for innovation, forging new trails ahead with holistic management principles and a commitment to regenerative agricultural practices. A wholesome quality of life, free-thinking, collaborative community, healthy livestock and wildlife, and diverse, resilient landscape are the benchmarks which drive the ranch's focus on sustainable, regenerative forage-based agriculture.</p>
        <p>The Winecup Gamble Ranch is devoted to being an innovative, yet profitable cattle ranching operation focused on holistic principles and responsible utilization and conservation of natural resources, while striving to hold steadfast to the values and ethics which have been the standard for generations.</p>
    </div>
</div>

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[CowgirlRed]

Thanks Victor. I see what you're saying. How do I style that in CSS?

[Victor Font]

The column class are already in style.css. If you want to style for color, size, etc. Just add another class to the div. <div class="one-third first my-custom-style">. Here's more on column classes: http://my.studiopress.com/docs/content-column-classes/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[CowgirlRed]

Thanks Victor. I think I can play around with this and make something work. Appreciate your help so much.

[Author]

Posts