Centred page containing 2 text sections and an image.
Hey guys.
I'm really not good at this coding thing, this has just proven it to me.
For what I want to achieve, I know I need to create an HTML with CSS.
On my About page: https://www.shearerviljoen.com/About I want the image, along with the text to remain centred when viewing on a desktop. With the width at 960px and equal empty space above and below.
When resizing the screen, I want the text's width to always fill out to that of the image (960px) and not to expand beyond the boarder.
Also within the text, I want the bottom lines of both paragraphs (left and right) to line up.
And lastly, when viewing on mobile, I am hoping to have both paragraphs aligned to the left.
Below are a few screen shots, where the green is an indication of what I want, and the red is not what I want.
I hope I'm making sense. Please let me know if there is more explanation needed.
Thanks,
Shearer
Comments
I can do everything except aligning those paragraphs. It's either impossible or it's beyond my pay grade.
Keep the picture, delete all Text Blocks and spacers and use one HTML/CSS Block:
HTML
CSS
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
I figured out a way to do this, but you have to have two versions of your text. The
.section
text will be hidden on desktop and thearticle
text will be displayed. When the screen is 736px or smaller, the.section
will display and thearticle
will display.HTML
CSS
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk