Make email optin embed full-width?

Hi @agentrosehq

Have you tried the “Embed Size” option which allows setting custom width and height to the embed under the “Appearance” tab > Advanced > Embed Size?

By default the Embed should automatically adjust to the width of the page, however, the example page which you have shared by default is full width, on the other hand, your page isn’t full width and consist of two sections ie the article and the sidebar.

So even if the width is increased is the Embed it’ll be within the width of the article. Could we know what exact design you are looking to achieve? Are you looking to achieve the full width as shared on the example website? or till the width of the article?

If it’s the width of the article please do check whether the “Embed Size” settings helps or not.

Looking forward to your response.

Kind Regards,
Nithin

Have you tried the “Embed Size” option which allows setting custom width and height to the embed under the “Appearance” tab > Advanced > Embed Size?

What width should I use to guarantee full-width universally if I do that? I just tried using “default size” instead of “custom size” (was custom size), and the preview still doesn’t span full-width. I wonder if it’s because of my page’s theme settings because the width of the embed = the width of the text.

By default the Embed should automatically adjust to the width of the page, however, the example page which you have shared by default is full width, on the other hand, your page isn’t full width and consist of two sections ie the article and the sidebar.

That is strange because right now it is a box (and has always been a box for me), and has never naturally stretched to full-width, even within the section that it’s in in the example link I gave you.

So even if the width is increased is the Embed it’ll be within the width of the article. Could we know what exact design you are looking to achieve?

So for example, on the homepage, I want it to span full-width (there’s one on the homepage if you just scroll down). And on blog posts like the linked post, I’d want the same, and currently there’s the problem i described above, perhaps due to my theme’s bounding borders.

Is there a way to add it to the footer and see if that will make it span full-width? I don’t see a Hustle widget optoin to add the embed.

Hello @agentrosehq !

Please try adding this code to Appearance >> Customise >> Additional CSS:

.hustle-ui.module_id_13 {
    position: absolute;
    width: 100vw;
    left: 0;
}

I’ve tested it on my end and it looks like it will work well for you.

And yes, that’s the actual reason – the embed is inside the post content column so it’s normally going to be bounded by it and won’t go outside. Making it “position: absolute” will allow it to go outside.

Kind regards,
Pawel

I pasted that code in to test it, but the problem with it now is that the entry fields are literally touching the side of the browser and it is hard to see. Is there a way to fix that or add padding to that side (and make sure it “looks good” at any desktop browser width)? Thanks

• This reply was modified 2 years, 9 months ago by agentrosehq.
• This reply was modified 2 years, 9 months ago by agentrosehq.

Hi @agentrosehq

The Embed is working as expected, as you can see on the below screenshot your page has a sidebar so it will use 100% of the available container:

https://monosnap.com/file/f5c46l9D8IeciWfjQCTFbC5SyvNcQf

The solution shared uses position absolute which can bypass it but I also suggest including the CSS to push your comment box below to prevent the embed from hiding it.

The 100vw covers 100% of any screen size.

.hustle-ui.module_id_13 {
    position: absolute;
    width: 100vw;
    left: 0;
}

.entry-meta:nth-child(3){
    margin-top: 300px !important;
}

@media screen and (max-width: 768px) {
 .entry-meta:nth-child(3){
    margin-top: 400px !important;
 }

}

About your field, you can switch to the default layout option and make the form below content:

https://monosnap.com/file/PCGFDndkWaXsl5m0pIKx84synzn7ws

Best Regards
Patrick Freitas

I tried the code you sent under “Additional CSS”, but the same issue occurs – it doesn’t look like your screenshot on the live site – the left side is fine, but on the right side, there is no black border around the input fields (the input fields literally touch the browser scrollbar). It is visually uncomfortable, see screenshot:
https://www.flickr.com/photos/agentrosehq/51928029430/in/dateposted-public/

Note that compared to your test version, my blog post has two columns. Not sure why yours shows only one column.

Tried switching to default like in your 2nd screenshot but that didn’t solve it either.

Hi @agentrosehq

I can see on your screenshot that a step is missing https://monosnap.com/file/PCGFDndkWaXsl5m0pIKx84synzn7ws

Please, use it when adding the CSS.

But I checked your screenshot and it is working as expected as the browser scrollbar take some space, a workaround is adding some extra padding if you would like to have more space.

https://monosnap.com/file/qVkI32nmCoNO3kGpPOc5TM7WwV1rVn

.hustle-ui.module_id_13 {
    position: absolute;
    width: 100vw;
    left: 0;
}

.entry-meta:nth-child(3){
    margin-top: 300px !important;
}

.hustle-ui.module_id_13 .hustle-layout-body{
    padding: 0 10% !important
}

@media screen and (max-width: 768px) {
 .entry-meta:nth-child(3){
    margin-top: 400px !important;
 }

}

Best Regards
Patrick Freitas

I already tried clicking the option you’ve stated along with the CSS and it does not look like the screenshot, linked here: https://www.flickr.com/photos/agentrosehq/51931641389/in/dateposted-public/

It doesn’t make a difference whether I have that option selected or not, lmk what I can do because I don’t know why it’s not showing up like in yours.

FYI i am changing it back to the previous option for the time being so it looks better for live users, but during the screenshotted moment, I followed all directions.

Hi @agentrosehq,

Please let us know the resolution of the screen that you are checking so that we can try to replicate it at our end.

We will be looking forward to hearing back from you.

Kind Regards,
Nebu John

My PC that I viewed this on is 3840 x 2160.

Strange that that matters, I feel like resolution shouldn’t matter for this but just keep me updated.

Hi @agentrosehq

I am afraid the best that we could find is the

.hustle-ui.module_id_13 {
    position: absolute;
    width: 100vw;
    left: 0;
}

.entry-meta:nth-child(3){
    margin-top: 300px !important;
}

.hustle-ui.module_id_13 .hustle-layout-body{
    padding: 0 10% !important
}

@media screen and (max-width: 768px) {
 .entry-meta:nth-child(3){
    margin-top: 400px !important;
 }

}

Without using this option https://monosnap.com/file/PCGFDndkWaXsl5m0pIKx84synzn7ws

Keep in mind that it is a workaround using Position absolute that should be avoided if possible, the problem is related to the theme container size as I pointed out on https://monosnap.com/file/f5c46l9D8IeciWfjQCTFbC5SyvNcQf

To learn more about the position https://www.w3schools.com/css/css_positioning.asp

The difference between your website and the shared here https://www.almostzerowaste.com/ is about the structure since your website has two columns and the shared is a single column so you can use the 100% full width easily.

A perfect solution would be modifying the page structure making it one column on the blog post without a sidebar or checking with your theme provider if they could make only part of the blog post page full width, maybe using Slide-in on blog post would be a better idea.

However, those changes need to be done on the theme side as the plugin is working as expected.

Best Regards
Patrick Freitas

Hi @agentrosehq

I already tried clicking the option you’ve stated along with the CSS and it does not look like the screenshot, linked here: https://www.flickr.com/photos/agentrosehq/51931641389/in/dateposted-public/

It seems your default module is not inlining the Form, could you please export the Module and share here using Google drive and we can take a look at that too?

To export click on gear icon > export https://wpmudev.com/docs/wpmu-dev-plugins/hustle/#module-dashboards

Best Regards
Patrick Freitas

Exported, link is here to gDrive: https://drive.google.com/drive/folders/1YlJ9MlI99jDZo_AuTPBpJp24xUrDNZJb?usp=sharing

Hi @agentrosehq

Thank you, I can see you are using the Form layout stacked instead of inline:

https://monosnap.com/file/LCULqsRoXjKpWjcSO0heYMYNRykscA

When using the default + Form inline and the shared CSS

.hustle-ui.module_id_13 {
    position: absolute;
    width: 100vw;
    left: 0;
    max-width: unset;
}

.entry-meta:nth-child(3){
    margin-top: 300px !important;
}

.hustle-ui.module_id_13 .hustle-layout-body{
    padding: 0 10% !important
}

@media screen and (max-width: 768px) {
 .entry-meta:nth-child(3){
    margin-top: 400px !important;
 }

}

I got this result:

https://monosnap.com/file/NB9xfVRg3QUZkVfmGTEHrFqklJThTq

But just keep in mind as I said it uses Position absolute and maybe some extra CSS is required for your theme, I do suggest contacting the theme provider or a developer as the embed position is working as expected but the problem is related to theme container size.

Best Regards
Patrick Freitas

I see what you’re saying, but what if I want it to look like this following screenshot of yours: https://monosnap.com/file/f5c46l9D8IeciWfjQCTFbC5SyvNcQf

I do want it to look stacked (as opposed to the inline option you just showed). The problem with the screenshot is that it is not full-width. You mentioned the below code earlier to make it full-width, but unfortunately that did not work for me with the way I want this to look (still shows white space on each side, as in your screenshot). S0 let me know if I can adjust this code somehow to make it work:

.hustle-ui.module_id_13 {
    position: absolute;
    width: 100vw;
    left: 0;
}

.entry-meta:nth-child(3){
    margin-top: 300px !important;
}

.hustle-ui.module_id_13 .hustle-layout-body{
    padding: 0 10% !important
}

@media screen and (max-width: 768px) {
 .entry-meta:nth-child(3){
    margin-top: 400px !important;
 }

}