Community Forums › Forums › Archived Forums › Design Tips and Tricks › Minor CSS Fix (Full width widget not working)
Tagged: css, full width, horizontal, widget
- This topic has 13 replies, 2 voices, and was last updated 8 years, 2 months ago by Vasilis.
-
AuthorPosts
-
January 18, 2016 at 4:23 am #176842VasilisMember
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
January 18, 2016 at 9:01 pm #176893VasilisMemberBumping this
This is very small, I'm sure
Any ideas?
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
January 19, 2016 at 11:23 pm #176996ChristophMemberHi 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...
January 21, 2016 at 9:40 am #177081VasilisMemberHey 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
January 21, 2016 at 10:20 am #177087ChristophMemberI would guess that Cloudflares' Rocketloader is interfering with the Javascript snippet from Getresponse.
Try deactivating Rocketloader/Cloudflare and see if the forms show again.
January 21, 2016 at 8:13 pm #177128VasilisMemberOk 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
January 23, 2016 at 10:26 am #177263VasilisMemberHey 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
January 23, 2016 at 12:16 pm #177272ChristophMemberHi 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.
January 23, 2016 at 2:12 pm #177301ChristophMemberHi 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.
January 23, 2016 at 9:03 pm #177331VasilisMemberHey 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
January 23, 2016 at 11:50 pm #177334ChristophMemberHi 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.
January 29, 2016 at 5:50 am #177813VasilisMemberHey 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
February 3, 2016 at 3:03 am #178227VasilisMemberHello ,
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
February 5, 2016 at 7:47 am #178378VasilisMemberFYI
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
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.