Still very new to this. I’m just trying to figure out if there’s a way to fine-tune placement of text with images (photos or icons, etc). For example, here’s a link to a site I’m working on: http://thepizzajoint.ca/Testing/
On the home page, I was trying to get the “Pizza by the Slice” text lined up nicely with the pizza icon. I wanted it just as you see it there. I tried a two column stack, a floating image stack…nothing let me fine-tune the positioning. What you see there is my solution…I created the entire block (icon and text) in Illustrator and placed it as an image. lol
I’m thinking there’s an easier way using actual text and stacks?
Here’s another example: http://primaryeng.com/contact-us/burnaby/
See the little phone, envelope and person icons centred next to each line of info.
I hope this makes sense…
I’d probably use Big White Duck’s Header Pro stack (free, but make a donation) for the pizza one.
The phone looks as though it’s been done with Font Awesome. You can do this by hand using FA code in an HTML stack for free or buy one of the main listy type stacks to do it for you. I like Lister from Stacks4Stacks but there are plenty around.
Be sure to check your work on multiple screen sizes also… what looks good on desktop can look poor on phones. For example, with your initial layout (image and text) you can put padding on top of your text with padding but if you have a responsive site and the page is viewed on a phone the text will break under the image (if setup properly) and you will have extra spacing between the image and text (due to the extra padding.) So some of these “alignments” are very difficult to do. I can’t image trying to do a responsive site without Stacks3 and the hundreds of available stacks.
If you are not using Stacks3 consider purchasing it today. There are many many stacks that let you fine tune margins and padding based on set numbers or percentages. I personally consider Stacks3 a mandatory add-on. To see what stacks can do here is a starting point: stacks4stacks That’s just one of the many many 3rd pary stacks developers.
Oh for sure, I’m definitely using Stacks 3! Love it so far. What you’re saying about padding and different screen sizers makes total sense. Funny enough, my icon and text PNG creation takes care of that issue!
As for Header Pro, I’ll definitely check it out! Now, Font Awesome…I don’t do code…but I’m not opposed to learning. Do you know of any good tutorials on how to use FA? Lister looks promising too, but if I could do it for free, I’d like to learn!
You can do that with Paragraph Pro from Big White Duck. Here’s a simple example. This is a powerful stack, well worth spending time getting to know because you’ll use it over and over again. Well worth the donation too.
I’m just trying to figure out if there’s a way to fine-tune placement of text with images (photos or icons, etc). For example, here’s a link to a site I’m working on:
