Jump to content

Center two individual text boxes using a container

Recommended Posts

Site URL: https://www.australianwildlifehealthinstitute.org

Hi there, 

I have two individual text boxes on my home page which I'm trying to center as if it were one div? My best guess is containers /flex, but I can't figure out the correct code to make this happen. 

I've been trying to figure this out for the last few hours now and can't for the life of me figure out why it's behaving like it is!

As an aside, when you currently resize the window the text with the green background doesn't wrap/move underneath when there isn't enough space. Instead it overlaps the AWHII, which I believe has something to do with the fix width sizes?

 

pw: awh11

 

Screen Shot 2022-01-20 at 12.00.50 am.png

Link to comment
  • Replies 4
  • Views 298
  • Created
  • Last Reply

Top Posters In This Topic

3 hours ago, tuanphan said:

#1. You mean banner text or white section text?

Sorry, I mean both the AWHII/Australian Institu.. and the white section text.

I'm trying to move them from this..

432887759_ScreenShot2022-01-20at7_44_16pm.thumb.png.722b5bad85b83cd405ed431032c0ddb4.png

To this, essentially a container centered.. 

254989009_ScreenShot2022-01-20at7_44_24pm.thumb.png.b39dde5600222d537f99d5c051235527.png

And then rather than re-sizing width when scaling I instead want them to stack like this when there is insufficient room..1162930667_ScreenShot2022-01-20at7_48_29pm.thumb.png.3940af6dd54329e3d4e5b1a14f1e5881.png

 

Right now when you scale the window the white text overlaps rather than moving below. Feel like I've tried everything!

Link to comment
On 1/21/2022 at 3:51 PM, tuanphan said:

Add to Design > Custom CSS

/* Stacked banner on smaller screens */
@media screen and (max-width:1024px) and (min-width:768px) {
div#page-section-61e6512837970d62dea5cc13>.row>.col {
    width: 100%;
}
}

 

Thanks @tuanphan , unfortunately that didn't quite solve my problem. 

I've changed the design slightly and now I have an image and a text box rather than two text boxes. Is it possible to horizontally align these and then force both them to maintain their sizes rather than rescaling as the screen width decreases? I'm now trying to keep both blocks the same size and have them wrap once the screen width is too small to fit the site margins. 

As you can see when the screen size decreases things start to look off.

2006139503_ScreenShot2022-01-23at12_53_57am.thumb.png.417ae6736c615469596e0f3eb5554c75.png

590752146_ScreenShot2022-01-23at12_57_39am.thumb.png.038c9560af045e8e92f17b21b0ce78fd.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.