Help needed with some theme css

linettemontae · February 2016

I have spent the past few weeks combing the questions already asked and have found many answers. Thank you.

I am now ready to release my website to the public but could not find a solution to the following items:

(1) When I add an image inside a blog post, the image is not wrapping - no matter what setting I try. Here is a blog post with an image. http://profitableceo.com/2015/04/24/art-com/

(2) Whenever I use the Muffin Google Font shortcode, the line spacing is too close. How can I increase the line spacing so the content is easier to read. This can be seen on my home page in every section. http://profitableceo.com/

(3) Also on the home page, I used Muffin to create a section for blog news. How can I shorten the excerpt length of posts in blog news? I cannot use the theme settings because I do not want to change the excerpt length on the regular blog post page (Articles). Again, home page is http://profitableceo.com/

(4) Is there a CSS to remove the Action BUTTON from home page ONLY but still allow the button to show on the other pages?

(5) I would like to adjust the font for the Sidebar Widget Titles. How can I change font size, font color and font weight for the sidebar widget titles? Also, how can I center the widget title? Here's a page where you can see a widget title: http://profitableceo.com/articles/

Thank you for your help. I love the theme!

Albert · February 2016

Hi,

1) Please open your website in Firefox html mode (CTRL+U) and check html errors. Please fix them first and all should be fine.

2) To increase line height of Google fonts, you need to use extra css:

.google_font { line-height: 30px !important; }

3) We are sorry but it's not possible to shorten the excerpt's length.

4) Yes, this can be done with:

.home #Top_bar a.button.action_button { display: none !important; }

5) You can do this with:

.widget > h3 { font-size: 30px !important; color: #000 !important; font-weight: bold !important; text-align: center !important; }

linettemontae · March 2016

Thank you very much - all of those things worked perfectly.

The final test of the website was on a mobile device.

There is something going wrong with the home page when viewing on mobile.

(1) The Google Font headlines are not resizing but instead the words are overlapping and cannot be read.

(2) When you turn the mobile phone sideways and scroll beyond the parallax - the entire page jumps up and down repeatedly.

What is the css for these?

Thank you!

Albert · March 2016

1) On which page google fonts does not resize on mobile?

2) We did not noticed anything like this.

linettemontae · March 2016

(1) The google fonts are not resizing on the Home Page for these titles How We Serve, Our Approach, Read Our Latest Articles.

(2) The page only jumps when I try to view the home page with my phone held horizontally.

The home page is the only page on the site that either of these problems are happening.

Thanks for your help with this.

Albert · March 2016

1) Ok, got it. We need to have a look on it closer because looks like fonts does not resize. At this moment, you can resize them with the following css:

@media only screen and (max-width: 767px) {
    .google_font { font-size: 25px !important; word-wrap: break-word !important; }
}

2) Yes, this is what we tried exactly but did not noticed anything like that. Tried on difference mobile devices and nothing. So until we won't be able to re-create this issue on our side, we have no idea how to help you. Maybe the problem is on your end only?

linettemontae · March 2016

The theme is working nicely.

I thought I saw a setting or css for this but cannot find it now.

I want to attach a featured image to my single blog posts but I do not want the featured images to show on the blog page.

Thank you.

Albert · March 2016

You need to remove featured images from blog page with custom css then. Please send us link to pblog page where you want to remove images and we will have a look on it.

linettemontae · March 2016

This is my blog page http://profitableceo.com/articles

When I add a featured image to a single post, I do not want the image to show on the blog page.

Thank you.

Albert · March 2016

But as we can see, you have just title and excerpt http://pasteboard.co/2qQ9qZ1O.png - there is no featured images.

linettemontae · March 2016

I removed the featured images because my site is live and I do not want the featured image showing on the blog page.

I do need featured images on the single posts.

What is the CSS to hide the featured images from the blog page.

Albert · March 2016

Because you don't have any images on site, we can not be sure which css would be the best. We can give you the css which works on our end only:

.blog .post-photo-wrapper { display: none !important; }

linettemontae · March 2016

OK, I put a featured image on the first post so you can see it.

The CSS provided did remove the image but now there is an empty space on the blog page where the image should be.

What css code would work for my site?

New question: when I post a link to my site on social media, no image appears. Where do I put an image for my website? Sorry, I used OptimizePress for years so this is new to me.

Thanks!!!

linettemontae · March 2016

In addition to the above questions, how do I remove the zoom on hover effect for the featured image on the single blog page?

Albert · March 2016

1. We do not see any image on your blog page. None of the posts have featured image.

2. To control images on services like FB, you need to use Facebook Open Graph plugin.

3. To remove zoom effect, you need to turn off Zoom Image option under Theme options > Blog, Portfolio & Shop > Bog section.

linettemontae · March 2016

I really appreciate the support provided but this time, none of your answers addressed what I asked. Maybe I was not clear so I will try again.

1. Here is the blog post I put the featured image on. I did this because you said you need to see it in order to give me a css code that will work. The blog title is "The Top Complaints from Employees About Their Leaders". http://profitableceo.com/the-top-complaints-from-employees-about-their-leaders/

It is the first post on the blog page. When you look at the single post, there is a featured image.

I used the first css code you gave: .blog .post-photo-wrapper { display: none !important; }. This code did remove the image from the blog page but it left a blank space where the image would be if not for the code.

I don't want the featured image to show on the blog page and I do not want the blank white space. I have provided a screenshot below.

2. Thank you for the plugin recommendation but I am asking where in the Be theme can I put a global image for my website - not just for Facebook or social media. Ex: If I add my url to a blog comment on someone else's website, I want my logo to be the image pulled for the url ProfitableCEO.com

3. The zoom effect is turned off but the featured post is still zooming on hoover, which is why I am asking for a css code.

I hope this is more clear. Thank you.

Albert · March 2016

1. Ok, found it finally. So instead of just using the css we gave you above, you need to use the following one:

.blog .post-photo-wrapper { display: none !important; }
.blog .post-desc-wrapper { width: 100% !important; }

2. Sorry but we do not have anything like this included.

3. If this option is OFF but the image still zoom on hover, please send us private message so we can have a look on it because we checked this option on our end and it works fine.

Help needed with some theme css

Comments