Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Center two individual text boxes using a container


VMorris

Question

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
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 0
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
  • 0

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%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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...