Archived topic
width and alignment of div
5 replies · Started by Rik on July 30, 2021
Hi,
we are using GeneratePress for a charity donation platform, for which we use GiveWP plugin.
In GiveWP, each charity has a donation page, eg: https://wordpress-629792-2052721.cloudwaysapps.com/donations/future-fund-multistep/
These donation pages look fine on mobile, but on desktop they looked very strange:
https://u.pcloud.link/publink/show?code=XZqnTxXZz9UtgkEpgO78mVxSOMEoy5m5JXIX
The div for the donation was aligned all the way to the left + it was really small.
We contacted GiveWP and they indicated that "This is a result of your site's CSS (styling) being a bit too opinionated."
We were able to solve the alignment issue by adding this to our CSS:
div#content {
justify-content: center;
}
GiveWP also indicated that this div is normally responsive and bigger on desktop, but that our site prevented. To check that this is true, they gave us this css code which implemented on the site:
div.give-embed-form-wrapper {
width: 600px !important;
}
This worked. As you can see, the donation div on the current URL (https://wordpress-629792-2052721.cloudwaysapps.com/donations/future-fund-multistep/ ) is much wider than when we had not implemented this CSS yet (https://u.pcloud.link/publink/show?code=XZqnTxXZz9UtgkEpgO78mVxSOMEoy5m5JXIX ).
However, now the div is not responsive anylonger, and is also this big on mobile, which does not work.
So my question is: is there a way to stop Generatepress from limiting the width of this div and to just allow it being responsive?
best
Rik
Hi Rik,
Not sure if I fully understand.
The page in question is already using the full width content container setting:
https://docs.generatepress.com/article/content-container/
This means that the content container 100% of the screen width and the actual width would depend on your content.
Does that help at all?
Dear Leo,
thanks for your reply, but you're right, you didn't understand my question :). The issue is not with the page as a whole, which indeed is already full-width. The issue is with the donation frame on the site (the one titled "test test"). In desktop view, as you can see on this page:
https://wordpress-629792-2052721.cloudwaysapps.com/donations/future-fund-multistep/
the donation frame is aligned all the way to the left and it is very narrow. This is not how it was developed by the Donation plugin devs. According to them, on desktop, this div is supposed to be centered (in the middle of screen) and it should be responsive in terms of size. What you are seeing here is the mobile size, the desktop size should be bigger.
I asked them why this was happening, and they answered: “This is a result of your site’s CSS (styling) being a bit too opinionated.”
So my question is: how can i get GeneratePress to let this donation frame look normally as their devs have intended it too, i.e. centered and responsive (larger)?
Hi there,
try adding this CSS to fix the containment/alignment:
.single-give_forms .site-content {
max-width: 1200px;
margin: auto;
}
.single-give_forms .site-content .give-wrap {
width: 100%;
}And i also noticed the Image is displayed in a way that requires its padding to match the image aspect ratio, and that needs adjusting:
.single-give_forms .site-content .give-wrap .image {
padding: 66% 0 0;
}Brilliant! that solved it, thanks.
Rik
Glad to be of help
