Mobile Render Issues with Canvas

Starting a new topic on this since the developers here rectified the first issue so quickly.

I am guessing the issues I am having are due to my lack of knowledge of css for mobile but would love help on this. There are a few things remaining on the theme that I am missing on my current setup that don't look like on mobile devices.

1: On the mobile view of the home page the blog is now the right color but the fonts are wrong, it seems to be pulling in a different font that is bold too. I don't see where I missed a tag on that, then again I also don't have that style in the global section.

2: for the widget titled Design Consulting on the home page needs to be the same font as the footer. I have tried numerous times to capture the correct div but I keep messing it up.

3: I want to change the blog widget title from latest to "from the blog". I have used firebug and been able to get deep enough with those tools but when i try to set it in the css it doesn't work. I also found a thread on this and applied that fix, to no avail.

thanks everyone

  • Adam Czajczyk

    Hey Dawn,

    I hope you're well today!

    Let's get through your questions one-by-one :slight_smile:

    1: On the mobile view of the home page the blog is now the right color but the fonts are wrong, it seems to be pulling in a different font that is bold too. I don't see where I missed a tag on that, then again I also don't have that style in the global section.

    Do you by saying "blog" mean the "Latest" section of the page? If so I really can see that difference you're talking about: it looks like it's the same font regardless of the resolution. Did you by any chance resolve the issue or do I misunderstand the question? Let me know please, I'll be glad to help.

    2: for the widget titled Design Consulting on the home page needs to be the same font as the footer. I have tried numerous times to capture the correct div but I keep messing it up.

    From what I can see you probably did identify the correct place to change font for widget title, however there's a small twist. If you try to change ".widget h3" or "h3.widget-title" it will affect titles of all the widgets. On the other hand, there's probably nothing going on after adding font-family declaration there. The first issue can be resolved by using "#panel-3292-0-101 .widget h3" to change font of that particular widget. The second can be fixed by adding "!important" after the declaration (e.g. "font-family:arial!important;"). It's not the best way to force CSS changes but sometimes it's the only reasonable one :slight_smile:

    3: I want to change the blog widget title from latest to "from the blog". I have used firebug and been able to get deep enough with those tools but when i try to set it in the css it doesn't work. I also found a thread on this and applied that fix, to no avail.

    Usually the widget title is changed from within the admin dashboard. There's no need to dig inside the CSS. I'm pretty sure you'll find it in "Appearance"->"Widgets" section. From what I see you're using a "Canvas" theme from WooThemes. Please check the documentation here: http://docs.woothemes.com/document/canvas/. I belive what you're looking for is "Woo Component widget".

    Hope that helped.
    Cheers,
    Adam

  • Dawn

    Hi Adam

    Sorry for the delay, thanks for your reply. I have read through this three times to ensure I am at least attempting to understand :slight_smile:

    Here are my replies

    1: Do you by saying "blog" mean the "Latest" section of the page? If so I really can see that difference you're talking about: it looks like it's the same font regardless of the resolution. Did you by any chance resolve the issue or do I misunderstand the question? Let me know please, I'll be glad to help.
    A: I didn't resolve it yet, I am not sure what to do to resolve it. if we look at the way the rest of the content buckets render they are proper, stacked and the fonts look normal. The "blog" while now in blue is hard to read because it is one large vertical string of text, skinny and not stacked. It's possible the font is correct and just looks off like this. The content directly below the blog is behaving the same way so I am guessing I missed a style or didn't close a style? Would love the help, you have permission to do what you need, I have backups of the site and of course I am also happy to do it with guidance.

    2: From what I can see you probably did identify the correct place to change font for widget title, however there's a small twist. If you try to change ".widget h3" or "h3.widget-title" it will affect titles of all the widgets. On the other hand, there's probably nothing going on after adding font-family declaration there. The first issue can be resolved by using "#panel-3292-0-101 .widget h3" to change font of that particular widget. The second can be fixed by adding "!important" after the declaration (e.g. "font-family:arial!important;"). It's not the best way to force CSS changes but sometimes it's the only reasonable one :slight_smile:

    A: so am i to read this right that all I need to do is mark it as important? I am okay with the possibility of it interfering with others in the future since the chance of another right side widget is next to zero :slight_smile:

    3: Usually the widget title is changed from within the admin dashboard. There's no need to dig inside the CSS. I'm pretty sure you'll find it in "Appearance"->"Widgets" section. From what I see you're using a "Canvas" theme from WooThemes. Please check the documentation here: http://docs.woothemes.com/document/canvas/. I belive what you're looking for is "Woo Component widget".

    A: So it isn't the widget title I wanted to change, I wanted to change the set of category names. What is pulls in is the active category from the blog/content. If I were to choose popular it would change it to popular or if I had more than one chosen it would display in tabbed form. does that make sense? I had found a post with instructions on renaming the "li" components but that didnt' work either.

    Let me know what else you need guys, i am here and will be quicker on the draw.... :slight_smile:

  • Adam Czajczyk

    Hey Dawn,

    I hope you're well today!

    I'm glad to hear that you've managed to resolve the first issue. I'll refer then to the other two questions.

    2)

    so am i to read this right that all I need to do is mark it as important

    Yes, that's exactly what I mean. Giving the "!important" flag to the css rule takes it "out of the hierachy", efficiently making it the most important one.

    3)

    So it isn't the widget title I wanted to change, I wanted to change the set of category names. What is pulls in is the active category from the blog/content. If I were to choose popular it would change it to popular or if I had more than one chosen it would display in tabbed form. does that make sense? I had found a post with instructions on renaming the "li" components but that didnt' work either.

    Thank you for clarification on this one. Do I correctly understand that all you want to do is simply to force this widget to show posts from specific category/categories only? If so, try this plugin: WP Recent Posts From Category . It's free and it will allow you to specify what categories should be used for pulling latest posts. Usage is very simple: just install and activate the plugin, go to the "Settings" -> "WP Recent Posts From Category" page in your dashboard, select options and categories and click on "generate shortcode". Then copy shortcode, go to "widgets" area, remove "recent posts" widget and put a simple text widget in the same place. In a text field put the shortcode, save et voila!

    Let me know if that helps, please.
    Cheers,
    Adam

  • Dawn

    Hey Adam

    I will reply to your responses below. Thanks for getting back to me on this. I may need help on the important and widget stuff but will totally give that as shot first.

    for the posts, I don't mean i only want the recents. Those are what are showing now and that widget has a style to it we want to keep. What I mean is that this widget is a tabbed widget which allows you to show up to three tabs. Each tab is associated with a section from the blog such as latest, categories, and whatever the last one is. I want to change the names associated with those tabs, so rather than having it say latest, I want it to say from the blog but maintain the same functionality. This has to do with changing the names of the Li tags associated with the div I believe but I have been unable to get that to function.

    Does that make sense?

  • Dawn

    Hi Adam

    are you able to continue to help with this?

    I tried your solution for changing the font for the design services widget to smaller like the footer and that didn't work I granted access so if you want to see if it works for you that would be great. I have tried numerous things and it doesn't seem to be picking up what is needed, I left the code in my custom.css labeled appropriately. I am sure it is something I am doing.

    Any more thoughts on changing the text from "Latest" to From The Blog"? I have tried numerous things but can't get it to show up. Also cant' even get the title for that widget to show.

    thanks Adam

    • Dawn

      Has anyone else had a chance to look at this issue I am having? I did try the fix listed above but it didn't work on my site. The primary item out of this list I wanted to get addressed is the Design Consulting content font being the same as the footer, smaller. The h3 as well as the body copy as well. I tried what Adam recommended, which was a great suggestion and maybe it does work and I am doing it wrong.

      The naming of the "latest" of the blogs on home page to "From The Blog". I have tried numerous fixes for this but none of them have worked. this is less of a priority though.

      Thanks all

  • Adam Czajczyk

    Hello Dawn,

    I hope you're well today and I'm sorry for the delay!

    I logged in into your dashboard and looked around. It seems that indeed my previous advice wasn't exactly accurate because of the way the page builder works on your site. You'll notice now that I've added an additional widget above the "Latest" part that does exactly the same but looks a bit different and is named as you wish.

    It's just a standard WP "Recent posts" widget and you are able to change its name freely, contrary to the "Woo - Tabs" widget. With a little css styling it should do the trick.

    I hope that helps.

    Regards,
    Adam

  • Dawn

    Adam:

    thanks for doing that, We are going live Friday so I am just going to figure out a way around it with what we have, we spent quite a bit of time styling the blog with the background and spacing shown in the woo tabs and I don't have the time to get in and style this one the same way. I will add it to dev and work on it later on.

    My bigger issue is really the style needed to match the design consulting section to what the footer is currently.

    thanks again
    DD

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.