icon alignment

Beaver Builder
1

Hi

I’ve repeatedly used the icon module at http://tablettechnologies.com/rugged-android-tablets/rugged-android-smartphones/ and am happy with the visual outcome.

However if you shrink your browser width to a single column (or view on your phone) then the icons stagger.

I can’t see what is doing this seeing as each icon has identical settings and they view just fine in a full window. Any thoughts? I tried multiple browser and phones but the result is consistent.

Thanks

2

Hey midijay,

Just took a look at your Website. The icons seems to be really messed up on smaller devices. Do you mind sharing temp admin access to the site so we can check further? You can use the private reply option below.

Thanks!

KC

3

[Content Hidden]

4

Hey James,

Using the CSS snippet below should fix you right up! :slight_smile:

@media (max-width: 768px) {
  .fl-module.fl-module-icon {
    text-align: left !important;
  }
}

Ben

5

sorry if I’m being dumb but which CSS file should i pump this into?

6

well i stuck in my main theme CSS and everything is aligned beautifully, thanks for your helps as always!

7

Hey James,

Sorry, but it would depend on the theme you’re using. What theme are you using? Are you using a child theme?

Edit: Sorry, just realized we have access to your site. Checking.

Ben

8

Hey James,

Try placing the code under Yorker > View Options > Custom CSS and see if it works! :slight_smile:

Ben

9

I have the same issue but my icons are centered. If I use the above CSS it solves the issue of misaligned icons at 768px break point. However, of course, it shifts everything to the left while the headings above are still centered. What would I need to include in this custom CSS to keep the icons aligned but still centered. Here’s a link to the page I’m referring to:

http://b2gstrategiescom.lightningbasehosted.com/

It’s section under “Why Choose B2G?”.

Thanks,
Dave

10

Hey David,

Try the CSS snippet below and let us know if it works.

@media (max-width: 768px) {
  .fl-module.fl-module-icon {
    text-align: left !important;
    margin:0px 20%;
  }
}

Thanks!

KC

11

Thanks, KC! That works great. One more thing. Because I’m using the icons like bullets in an unordered list, is there also a way to get the icons to align with the top line of text? As it is now they center vertically across multiple lines of text. This isn’t a big issue on larger screens, but on smaller screens it doesn’t look good. Perhaps there’s another line of CSS I could add to the above snippet to control this at the 768px break point?

Thanks!

Dave

12

Hey Dave,

The snippet below should do the trick!

@media (max-width: 768px) {
  .fl-module-icon .fl-icon {
    vertical-align: top;
  }
}

Ben

13

Thanks, Ben! That did the trick for vertical alignment. I just changed the max-width to 1024px, as it didn’t look so good at that width either. Now I’m dealing with an issue of text breaking at odd places on iPad in both landscape and portrait (1024 & 768). Here’s an image I put on Imgur to show what I mean: http://imgur.com/CFKUfJW (768px).

In order to get the icon/text lines looking decent when centered, I had applied margins in the icon module of 230px on the left and 200px on the right and things look to be fine at widths above 1024px. Not sure why it’s just happening at 1024 and 768px.

Thanks again!

Dave

14

Hi,

Just following up on my previous post. Any idea how I can solve the issue of text shifting to the line below in odd places, as can be seen here: http://imgur.com/CFKUfJW (768px).

Thanks!

Dave

15

Hey David,

Just took a look at your Website and it looks like there is a <br> tag in between the sentences. Could you check on it or probably remove it?

Thanks!

KC

16

Thanks, KC! That’s interesting. I didn’t add these tags and don’t see them when I look at the content in the text tab of the editor. Any idea how these might have been introduced? Since I don’t see the tags in the BB text editor, I guess I’ll have to edit these at the file level.

Dave

17

Hey David,

Sorry about that, that could be caused by the “Enter” key in between sentence. Could you probably make the sentence connected? eg. a single line sentence without breaking it with the “Enter” key.

Thanks!

KC

18

That’s exactly what it was. Great catch, KC! Got it fixed now. Thanks!!

Dave

19

Hey Dave,

Glad that worked for you, enjoy BB and let us know if you need anything further! :slight_smile:

Thanks!

KC