How to Move White Box to the Left Side - Refresh Theme

[wrldwide]

Hey guys, just wondering how to mimic this white box and the text inside of it as closely as possible on my own website:

My Website: http://wrldwidesupply.com/

Password: secret123456

As a result, these are the specific things I would need the solutions to:

1. Move my white box and the text inside of it to the left
2. Make the shape of the white box the same as the picture above
3. Change "OUR MISSION" to the thin font (Questrial)
4. Have "Beyond Borders, Your Global Journey Awaits" as its own text box in the bold font (Archivo Bold)
5. Have the description text below it as its own text box as well

Any suggestions on how I could accomplish this?

[wrldwide]

Yeah, I can code a bit

[oscprofessional · Accepted solution]

Hello @wrldwide 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.banner__box {
    max-width: 44rem !important;
}
.banner__content--middle-center {
    justify-content: left !important;
}
.content-container {
    border-radius: inherit  !important;
}

[wrldwide]

Hey @oscprofessional, it works but on mobile view, I want the text to be on the image, but still keeping the white box.

I have tried turning "Show container on mobile" on and off to see what it looks like but it is still missing the white box in the background.

Any thoughts on how to fix this?