aligning text and image

Hey there.

Why don’t you want any padding?

Just interested ??

The width of the images is 800px but the container is 940px as is the Paragraph the text is within.

You could do something like this:

#page .container .content p {
	width:88%;
	margin: 10px auto;
}

That should then keep it responsive as your downsize the browser/mobile device. Basically it makes the P tag 88% width of the container and the marin is then set to auto adjust (centre) whilst keeping 10px on top from the H tag.

Hope this helps.

Hmm, that didn’t work for me… do I need to change something in the code that you provided?

If it didn’t work then I’d guess you never placed it late enough in the load sequence.

I took a look at your site but I can’t see any code, I guess you removed it. With CSS the last instance called is the one that takes priority so it’s important you ensure this is loaded last.

I just tested on your site and here is what I saw:

https://monosnap.com/image/x0lC0SMjw6P0YcAVnBbyU8KXL6Gpyj

how and where did you originally add the CSS?

Or maybe I misunderstood what you need?

Cheers.

Hi Alonis,
I found that if you want to keep the same font size, the only way is to insert a line break
in your text editor just after “for lovers of”. This way the “the sweet things of life” part would go underneath on a second line and this would all fit inside the picture area. Hope that helps! Regards

Timothy, the screenshot that you included shows exactly what I’d like to do. I inserted the code in the CSS Stylesheet Editor (under the Appearance tab). I’m sorry, I’m very new to this – is this the wrong place?

Where exactly in the sheet?

I’m guessing it wasn’t the bottom?

There is a chance that the theme has a CSS field in the options, but if not then you can make a child theme:

https://codex.www.ads-software.com/Child_Themes
https://premium.wpmudev.org/blog/create-wordpress-child-theme/

Or you can instead use a plugin if you like:

https://www.ads-software.com/plugins/custom-css-manager-plugin/screenshots/

https://www.ads-software.com/plugins/my-custom-css/screenshots/

https://www.ads-software.com/plugins/pc-custom-css/

https://www.ads-software.com/plugins/imporved-simpler-css/screenshots/

Editing the main stylesheet will mean that updates overwrite the changes you made.

Have a fantastic day! ??

Wow, thanks so much for your help, Timothy! The theme does indeed have a custom CSS field; I entered your code there and it worked like a charm. And thanks for the other links, too – I’ll definitely make use of them as I learn more about CSS.

Awesome news!

Glad I could help ??

I’m not sure why, but all of a sudden this doesn’t work anymore… Does it have to do with the order in which the codes are loaded?

Hey there.

In your CSS you have this before:

/ Align text and image on homepage

And this after:

/ Remove underline from links

Is there a reason?

That’s the cause of the issue. If you are wanting to comment in the CSS then you comment like this:

/* Align text and image on homepage */

Note how you open and close the comment with /* and then */

Hope this helps. ??

Timothy, you are incredible. Thank you so much for finding all of my silly little mistakes (I’m used to writing codes for various other – math related – programs and I assumed that the backslash carried over).

Problem solved!

Thank you for the kind comments.

If you’re planning on attending the European WordCamp event in September then let it be know I love cake!

Chocolate cake, carrot cake, CAKE! ha ha.

Sorry, I became a little peckish from looking around your site, ??

Have a great weekend! ??

Haha! If I find myself in the area, I will definitely remember that ??

Thanks again, hope you have a great weekend as well!
Cheers,
alonis