aligning text and image
-
Hi there,
I would like to align the text and image on my homepage (lbsbakery.com) so that the text below doesn’t extend past the photo. I tried using a table, but it changes all of the fonts and sizes and has too much padding (I don’t want any padding at all). Is there an easier way to do this?
Thanks!
-
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:
http://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! RegardsTimothy, 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:
http://codex.ww.wp.xz.cn/Child_Themes
http://premium.wpmudev.org/blog/create-wordpress-child-theme/Or you can instead use a plugin if you like:
http://ww.wp.xz.cn/plugins/custom-css-manager-plugin/screenshots/
http://ww.wp.xz.cn/plugins/my-custom-css/screenshots/
http://ww.wp.xz.cn/plugins/pc-custom-css/
http://ww.wp.xz.cn/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 homepageAnd this after:
/ Remove underline from linksIs 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
The topic ‘aligning text and image’ is closed to new replies.
