Community Forums › Forums › Archived Forums › General Discussion › Image and text alignment
- This topic has 12 replies, 3 voices, and was last updated 10 years, 7 months ago by emasai.
-
AuthorPosts
-
September 6, 2013 at 4:45 pm #61151beoleary1Member
How do I best align multiple images with their corresponding text? I would like the image to appear to the left of the corresponding text and when the page is resized, you don't get goofy misalignment issues. Is the best way to handle this is use of columns?
September 7, 2013 at 3:59 pm #61264RobinMemberNot sure if this is what you mean, but do you mean the wonky text wrapping that happens when the images don't fill the width on the phone? You can set up rules for it in your media queries. I just wrote a blog post about it here, if it helps.
I do the best I can with what I’ve got. (say hey on twitter)
September 9, 2013 at 6:10 am #61480beoleary1MemberRobin,
Awesome post and I will take your advise for mobile, which I haven't gotten to yet for my site but need to consider. My issue has to deal with web browsing and perhaps there is a fix similar to what you suggest or perhaps a different approach? I use 150 x 150 images where I align them left of my text which is usually 3-5 lines of text. After placement of this image (which I drop left of the first word in my text for a given block), I will continue with my page after making a   space and continue the process. Depending on my text, I am forced to use sometime more than one   or the page looks all screwed up with the next block flowing into the proceeding with image floating way out on the right. If I repeat the process, my page begins to look like steps, pics and text stacking up further and further to the right. Problem is as soon as a resize the page in my browser, what does look good is screwed up again. All these problems are due to wrapping issues similar to your mobile issue. I was thinking of columns as perhaps being the answer? There has to be an easy solution?
Brian
September 9, 2013 at 7:57 am #61497RobinMemberI'm having a hard time visualizing what you've got going on, Brian--can you share a link? If I can look at it in person I might understand better.
I do the best I can with what I’ve got. (say hey on twitter)
September 10, 2013 at 5:32 am #61647beoleary1MemberRobin,
Here you go. http://microsprayinternational.com/nozzles/
The site is hidden right now since it is under construction, you will need the following password to log-in: asdfn$rT6
Brian
September 10, 2013 at 6:38 am #61660RobinMemberAh, I see exactly what you're talking about now. You can approach it one of two ways, I think.
What I would do is change your strong lines (the Precision Spray Ultrasonic Nozzle, etc) to be headings instead. Whatever level you like. I played with an h3 just for grins. This will set them apart a bit more, bot visually and for search engines. Then you can add
clear: both;
to your h3 specific styling at line 261 in your style.css. Anytime you put an h3, it will be forced to start a new line no matter what, so you can get rid of the extra line breaks, which I agree are problematic.Another option would be to add an hr after each image/block of text and then style that with a
clear: both;
if you would rather not mess with your headings.HTH
I do the best I can with what I’ve got. (say hey on twitter)
September 11, 2013 at 6:36 am #61898beoleary1MemberRobin,
Getting closer, but still no cigar. I tried your first and second method. Not sure if I added the clear: both; correctly?
h3 {
font-size: 24px;
font-size: 2.4rem;
clear: both;Where would I but clear: both; for images?
Brian
September 11, 2013 at 6:53 am #61903RobinMemberHey Brian! It looks good to me, although you might add some padding to the top of the h3 to add in some space above each section when you get to mobile sizes, or in general if you want more space between each one. Also I think you want to remove the links from the images/headings since they just link to the image file.
If you want to clear the images, looks like that is line 605. You can play with a lot of CSS on the fly if you use Chrome's developer tools or Firebug in Firefox. HTH
I do the best I can with what I’ve got. (say hey on twitter)
September 11, 2013 at 10:14 am #61947beoleary1MemberRobin,
I did the following, not really sure what I was doing, but your instructions were a good guide:
h3 {
font-size: 24px;
font-size: 2.4rem;
clear: both;
padding: 20;
}Outcome - PERFECT!
Thank you
Brian
September 11, 2013 at 11:09 am #61969September 14, 2013 at 2:15 pm #62565beoleary1MemberHi Robin,
I checked out your blog for mobile devices you cite in this post. The title that goes with the related picture gets chopped in half. Any ideas how to have the picture only show and title text that shows to the right in my pages push onto the next line for mobile devices?
Brian
September 14, 2013 at 2:40 pm #62569emasaiParticipantIn the media queries increase the right margin of the image within the h3 tag, this will push the text down below the image.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comSeptember 14, 2013 at 2:44 pm #62571emasaiParticipantP.S. The padding you have added to the h3 tag does nothing as you did not specify px, em or %, you just used padding: 20;
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com -
AuthorPosts
- The topic ‘Image and text alignment’ is closed to new replies.