[FlightwaveParticipant]

Hi there,

I need help please.
Please refer to this page: http://dev.flightwave.aero/product/edge/
Login info to follow in next post.

Please see the tabbed box to the right of the product image. Inside the first tab [FEATURES], I have a list of features, each starting with an icon. The text that follows the icons doesnt line up vertically from line to line. I’ve done my best by using margin settings for each line, and inserting a space at the beginning of lines that needed it – but this imperfect.

Also – you’ll notice (picture attached) that the first line of text wraps – and when it does – it’s all the way over where the icons are.

HOW CAN I: line up the lines of text vertically so that each text line starts at the same spot, and if a line of text wraps because it’s too long – the wrapped line also starts in line with the other lines of text.

Thank you!
Chris

[FlightwaveParticipant]

This reply has been marked as private.

[FlightwaveParticipant]

One more question:
How can I change the font of the text of certain lines without changing the font of ALL lines in all three tabs?

For example, if I wanted to change the font of the text in the FEATURES tab to be h6, but wanted the text in the SPECS tab to be “Lato (google)” – how can I do this?

Thanks!
Chris

[RupokMember]

Hi Chris,

Thanks for writing in! It would be better if you wrap the text within a paragraph text. Then it will be easier to add some styling to the text to line up properly with the icon. Let’s do this first and update us.

Cheers!

[FlightwaveParticipant]

Hi Rupok,
I’m a bit of a novice. Can you explain in detail how to do what you’re requesting?

See 2 attached images that I edited in photoshop to help illustrate the problem and what I want to accomplish.

Thanks.

[RupokMember]

Hi there,

I got your issue and I know what you are trying to achieve. You have placed the icon and text like this :

[x_icon type="clock-o" style="font-size: 30px; color: #003EFF; margin: 0px 0px 0px 21px;"][/x_icon]Up To 2.5 Hrs Flight Time With Optional Solar Wings

Let’s place them like this instead:

[x_icon type="clock-o" style="font-size: 30px; color: #003EFF; margin: 0px 0px 0px 21px;"][/x_icon] <p> Up To 2.5 Hrs Flight Time With Optional Solar Wings</p>

That is you need to wrap the plain text with a paragraph tag. It would be easier to style the texts. Update us when done.

Hope this makes sense.

[FlightwaveParticipant]

Ok thanks, I did that. This is what I got (see attached image). Also – just FYI – i have the h6 tag in the code as you probably saw – because I wanted that font in the table in the middle tab. Don’t know if that’s also affecting things…

[FriechModerator]

Hi There,

Please wrap the icon and text with its own <div> instead. See the first item (T-VTOL:) for example.

<div class="icons-col">[x_icon type="arrows" style="font-size: 30px; color: #003EFF; margin: 0px 0px 0px 18px;"][/x_icon]</div>
<div class="text-col">T-VTOL: Smooth Inflight Transitions Between Hover & Cruise Modes</div>

And then add this on top of your custom CSS on Customizer, actually I did go ahead and did this.

.icons-col, .text-col {
	display: table-cell;
	vertical-align: middle;
}

Hope it helps, Cheers!

[FlightwaveParticipant]

Hi there Friech,

So I implemented that – but something went wrong. I’m sure it’s an easy fix – but I can’t figure it out. Can you take a look please and let me know how to fix it? I’ve attached an image, but you can also just log in and check it out.

Thanks!
Chris

[FlightwaveParticipant]

I put a <br> after each line – so now they’re each on their separate lines, but the text still isn’t lining up. Have a look:

[Paul RModerator]

Hi,

It seems to be lining up correctly.

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do ( perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[FlightwaveParticipant]

Hi Paul,

Thanks for the response – appreciate it.

The alignment is not “terrible”, but it’s definitely not lined up vertically. I’ve attached an image to better point out what I mean. Any additional help would be much appreciated.

[JadeModerator]

Hi there,

Please add this code:

.text-col {
    position: relative;
    top: 1px;
}

[FlightwaveParticipant]

I added it – but it doesn’t work.

Please see attached image. Please take a look at the custom CSS and make sure I haven’t added conflicting elements. Seems like I’ve added several things to attempt to change this – and maybe they’re conflicting with one another.

Thanks very much.

[FriechModerator]

Hi There,

Please remove the inline-style margin you applied on the icons, because those are not equals. Some you set some of them as 26px, some 18px, and some 20px.

After removing those inline margin. Add this on your custom CSS

.icons-col i {
	width: 60px;
}

Hope it helps, Cheers!

[Author]

Posts