Minor CSS Fix (Full width widget not working)

[Vasilis]

Dear awesome people.

I just added 2 full width horizontal widgets in my custom Genesis child theme here => http://theVasilis.com

The widgets are working perfectly.

My problem is that I can't force them to appear full width.

Also for the .before-content widget I want it to appear WITHOUT padding from the header image.

Here is the PHP I used

//* Register the before content widget area
genesis_register_sidebar( array(
	'id'          => 'before-content',
	'name'        => __( 'Before Content', 'genesis_sample' ),
	'description' => __( 'This is the before content widget area for a horizontal full width call to action.', 'genesis_sample' ),
) );

//* Add the before content widget area
add_action( 'genesis_before_content', 'before_content_cta' );
            function before_content_cta() {
            if ( ! is_home() ) {
                         return;
            }

genesis_widget_area( 'before-content', array(
        'before' => '<div class="before-content widget-area">',
	'after'  => '</div>',
) );
}

//* Register the before footer widget area
genesis_register_sidebar( array(
	'id'          => 'before-footer',
	'name'        => __( 'Before Footer', 'genesis_sample' ),
	'description' => __( 'This is the before footer widget area for a horizontal full width call to action.', 'genesis_sample' ),
) );

//* Add the before footer widget area
add_action ('genesis_before_footer','before_footer_cta', 5);
        function before_footer_cta ()  {
	echo '<div class="before-footer-container"><div class="wrap">';
	genesis_widget_area ('before-footer');
	echo '</div></div>';

}

And here is the CSS I'm using

/* Make CTA's Work Correct
-------------------------------------------------------------*/

.site-inner .before-content {
	clear: both;
	padding-top: 0px !important;
}

.before-content {
        width: 100% !important;
}

.before-footer {
        width: 100%;
}

Any ideas?

Thank you very much

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

http://theVasilis.com

[Vasilis]

Bumping this

This is very small, I'm sure

Any ideas?

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Christoph]

Hi Vasilis,

FYI, bumping a topic does not really help you because it removes your post from the list of topics with no replies...

The getresponse sign-up forms are not showing in either widget. Without any content in the widget areas, it´s impossible to see what is going on.

By full width, do you mean the width of the element (.site-inner is 1200px wide) or the width of the screen?
If you mean the width of the screen, you can try to hook the before-content widget area in an earlier hook, so it is not inside of .site-inner. (Maybe genesis_after_header...)
Alternatively, you can remove the width from .site-inner and only add it back to the elements you don't want to be "screen wide"

On a side note, the blue area covering the iframe at the bottom of your page looks a bit out of balance...

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Vasilis]

Hey Christopher

Thank you very much!

Well followed your advice and changed the hook. Now the first widget works ok.

Now the width I mean the blue option form widgets (both) of them I need them to be responsive (adjusting to full width in every dimension)

So checking the website from a mobile or a desktop computer should make both widget areas appear extending full width like my header cover image.

I hope I'm giving you to understand my point here.

P.S. as far as GetResponse not loading I'm talking with GetResponse support for this. Didn't know before.

Any ideas?

Thank you once again.

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Christoph]

I would guess that Cloudflares' Rocketloader is interfering with the Javascript snippet from Getresponse.

Try deactivating Rocketloader/Cloudflare and see if the forms show again.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Vasilis]

Ok I didn't know this...

Thank you very much

Let me talk with GetResponse's support and Cloudflare's support and see how to get a solution for this.

However what about making these 2 widgets appearing full width and responsive?

What would be the CSS edit needed?

Kind Regards

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Vasilis]

Hey Christopher

It's not RocketLoader eventually...I disabled it but still the forms are not loading...

Probably something with GetResponse's new responsive forms.

Thanks anyway.

Anyone any idea about making those 2 widgets responsive and full width?

Appreciate it

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Christoph]

Hi Vasilis,

until I can actually see the Getresponse form, I cannot tell you what changes you might have to make.

I'd still guess it´s a problem with caching, cloudflare or minfying...
Make sure that bwp-minify is not minifying (parts of) the Getresponse Javascript.

I would deactivate Cloudflare and all caching and check if the Getresponse forms are showing. If not, something is wrong with Getresponse. If they show, you have to adjust your caching/cloudflare for the Getresponse Javascript...

I hope Getresponse gets back to you with a solution quickly.

I see a notice in the console: Your version of Sniply is deprecated. Please visit http://snip.ly/dashboard/embed/ to update.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Christoph]

Hi Vasilis,

seems my earlier reply did not go through...

I'd still suspect that there is an issue with caching or minimizing.
I would deactivate cloudflare, bwp-minify and any other caching and check if the forms show up.
If they show, you have to adjust something in your caching/minifying setup to accommodate the Getresponse JavaScript.
If they don't show, there is a problem with Getresponse.

Without seeing the actual forms, I can't really help you with their width and responsiveness.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Vasilis]

Hey Christopher

I just deactivated , Cloudflare , WP-Cache and BWP-Minify from my website.

I already opened a ticket with GetResponse's support team for the first after-header web form.

However if you could check here

http://thevasilis.com/9-public-speaking-secrets/

Scroll down at the end you will see the second exactly SAME form appearing before-footer.

As you can see it appears centered but not full width and it is definitely not responsive.

If you could give me some tips for this , then I can go on and fix the other one.

Tons of appreciation.

Kind Regards

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Christoph]

Hi Vasilis,

it looks like the width is coming straight from the Getresponse form; doesn't matter what width you set on your website...

If this is all the styling you want for the form, I would simply use Genesis eNews extended.
More flexibility to style and there are a bunch of tutorials on how to make the opt-in form horizontal.
It would also greatly increase the speed of the website/availability of the opt-in form.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Vasilis]

Hey Christoph

Sorry for the late reply.

I just changed my "before footer" widget to Genesis eNews testing it's CSS at the moment to configure colors etc...

Still this widget appears NOT full width.

So it's not a GetResponse plugin problem , but the widget itself is not configured correctly.

Any ideas for this?

Appreciate it!

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Vasilis]

Hello ,

So I did change my optin form and using Genesis eNews Extended now.

Here are some totally weird (according to my tiny knowledge) CSS problems....

1. The plugin does not seem to read my CSS code...it renders totally different stuff on the widget...

CSS I'm using is this

.enews-widget {
        background-color: #4099FF !important;
}

.enews-widget .widget-title .h3 .h4 .body {
	color: #fff;
        margin-top: 10px;
}

.enews-widget input {
	color: #fff;
	font-size: 16px;
        font-color: #000;
	margin-bottom: 5px;
        margin-right: 5px;
        margin-left: 100px;
	text-transform: capitalize;
        width: 35%;
}

.enews-widget input[type="submit"] {
	background-color: #fff !important;
        font-color: #4099FF !important;
	font-size: 18px;
        font-weight: 500;
	margin-bottom: 5px;
	text-transform: capitalize;
	width: 35%;
}

.enews-widget input:hover[type="submit"] {
	background-color: #4099FF;
	color: #fff;
}

.enews form + p {
	margin-top: 5px;
        font-size: 12px;
}

And before going on let me tell you I tried to disable CloudFlare , disable my caching plugin and purge everything...delete browser cookies etc...

It just doesn't want to read the CSS....

Very weird...

2. The before-footer widget is still 1200px wide although I have this CSS code to make it full width

.site-inner .widget-area .before-footer {
        width: 100%;
}

.site-inner .wrap .before-footer {
        width: 100%;
}

I'm breaking my head here...Can't find what is wrong...

Any ideaS?

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Vasilis]

FYI

The Genesis Child Theme is drawing it's CSS for Genesis Enews Extended plugin directly from the Genesis Parent (Framework)

I don't know who thought to add this CSS code in the parent theme...

To make it work in the child theme I had to delete the CSS code from the parent theme.

Weird.....anyway now it's almost working how I want it to.

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Author]

Posts