Various Questions

Beaver Builder
1

Hi,

Please could you give me a hand on solving a couple of these issues I have on a website that I have moved from the woothemes canvas theme to the BB theme. We are also updating the content and using the BB plugin.

http://newbuild.thrivehomeopathy.com/

1> On the ‘Articles’ page the thumbnails for each blog post are set to 100px sq but they don’t show at that size.

2> Please can you tell me how to reduce the line height of the ‘Disclaimer’ text in the footer.

3> When the sticky header is activated the navigation drops to the next line. There is space to the right of the logo, can you tell me how to use that space for the navigation bar?

4> On the homepage the are 3 boxes half way down the page, in the column settings the ‘equal hight’ has ‘yes’ selected but as you can see those boxes aren’t the same height.

Many thanks!

2

Hi Susanna,

  1. You appear to be using the Post module to display your posts. In the Post module, you can change the image size using the Featured Image options.

  2. The Disclaimer text appears to be added to a Text module, but is wrapped in a p tag with a class called widget-text ? Is this coming from a widget via a shortcode? Also, the text has a custom font-size via inline styling from <span style="font-size: 14px;">.

You will probably want to either add line-height: …; to that inline styling in the p tag or remove the inline styling and then use the Text module to set the font size.

  1. You can try the following CSS to override the default widths. However, it is very rare these days for sites to include a Home menu, as most users know to click the logo image. Therefore, you could remove this menu item and save space.
.fl-page-header-fixed .col-md-3.col-sm-12 {
    width: 15%;
}
.fl-page-header-fixed .col-md-9.col-sm-12 {
    width: 85%;
}

  1. The columns do have an equal height. The issue you have is that you have added custom CSS to give each column a background color. The element you have targeted do not have equal heights. If you apply a background color using the column settings, there will be no spacing between each column. You could try adding the following to get around this:

  2. Add a custom class to each of your Callout modules, make sure the class is the name for all three modules.

  3. The add the following CSS, be sure to update the code below with your custom class.

.my-custom-class .fl-col-content {
    margin: 20px;
}

The end result should look similar to this - https://cloudup.com/cHqPqwTo5fD

Thanks,
Danny

3

Hi Danny,

Thanks for getting back to me.

1> I have tried the thumbnail option but they look bigger than 150px sq to me http://d.pr/i/yfI2

2> I’ve tried adding <span style=“font-size: 14px; line-height: 2px;”> but it hasn’t made any difference

3> Sorted… THANK YOU!

4> Is there anywhere in the knowledge base about the ‘CSS Selectors section on modules’?

Also on some screen the social icons are dropping to the next line, I would think that there is plenty of room for them to move and be responsive http://d.pr/i/xfyN

Thanks for all your help!

4

[Content Hidden]

5

Hey Susanna,

I’d just like to chime in here. :slight_smile:

  1. Try adding the CSS snippet below and see if it's what you're after. You'll need to add a custom class to your module though and change custom-class to whatever class it is you've added. :) ``` /* Change Posts module Feed layout featured image size */ .custom-class .fl-post-feed-image-beside .fl-post-feed-image { width: 20%; } .custom-class .fl-post-feed-image-beside.fl-post-feed-has-image .fl-post-feed-content { margin-left: 23%; /* Adjust as needed */ } ```
  2. I can't seem to find the p tag that Danny was referring to on your disclaimer text? The line-height styling only applies to block elements, which a span isn't. :) Try changing the span tag, where you have the line-height style applied to, to a p tag and that should fix you right up!
  3. Sorry to say but we don't have such thing on our KB, and I'm not really sure if we'll be adding one as well(as it would be very complicated). I'm using Chrome's dev tool though and it definitely helps on that department! :) The problem here is that only the columns' height are equal, not the modules', and you're placing your background on the modules'. Have you tried setting up the background on your columns' setting instead?

Hope the above helps and let us know if we can assist you further! :slight_smile:

Edit: Added a line on #1.

Ben

6

Thanks Ben…

1> I don’t understand why the settings in the module don’t work when I select ‘thumbnail 150 px’??

2> I think I’m going to give up on this one as I still can’t get it to work… thanks anyway.

4> Ok no problem,

7

Hey Susanna,

So for #1, the setting is actually referring to the resolution of the image used, not the dimensions of the image. Notice how the image gets blurred if you use thumbnail. For #2, I did the change on your Global Footer since it’s pretty simple. You can change the inline styling for the line-height until you get what you want. :slight_smile:

Ben

8

Hi Ben,

Thats great, thank you!

Did you see this other problem -

Also on some screen the social icons are dropping to the next line, I would think that there is plenty of room for them to move and be responsive http://d.pr/i/xfyN

Thanks again :slight_smile:

9

Hey Susanna,

Sorry, I missed that. I did try squeezing my screen but I can’t seem to recreate the issue. Tried on both Chrome and FF. What browser does the problem happen and on what specific resolution?

Ben

10

I’ve mostly noticed it when using the customiser. And it has happened at other times. I have just ran it though browserstack but it seemed ok. Maybe once we launch we can see if continues to happen…

Thanks anyway

Susanna :slight_smile:

11

Sounds like a plan! Definitely let us know if it still occurs by then and we can have another look. Enjoy! :slight_smile:

Ben

12

Thanks Ben