Featured Widget Amplified on Magazine Pro Help

Community Forums Forums Design Tips and Tricks Featured Widget Amplified on Magazine Pro Help

This topic is: not resolved

This topic contains 8 replies, has 2 voices, and was last updated by  emasai 8 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #80814

    BMW
    Participant
    Post count: 16

    Problem URL: http://bit.ly/1icBHcN

    Using the normal featured widget plugin, my design is how I want it. i.e.

    However when I use the featured widget plugin, I see this:

    It’s apparently a css width or float issue, but I suck at CSS and I can’t figure it out.

    How can I get the normal featured widget styles to show when featured widget amplified is enabled?

    Thanks in advance.

    • This topic was modified 8 months, 1 week ago by  BMW. Reason: forgot to say thanks in advance
    • This topic was modified 8 months, 1 week ago by  BMW. Reason: forgot to say thanks in advance
    #80816

    emasai
    Participant
    Post count: 648

    Changing your image to alignleft will make the text float to the right of the image. But I just reread your post and I guess that is not what you want to achieve. I will have another look.


    Need Website Customization or a Responsive CSS fix? Contact Me
    Lynne emasai.com

    #80822

    emasai
    Participant
    Post count: 648

    I got them to move side by side by adding
    .gfwa-odd {
    width: 45%;
    float: left;
    }
    .gfwa-even {
    width: 45%;
    float: right;
    }
    You might need to be a little more specific with the target as I applied it directly to the element.
    Let me know if that works.


    Need Website Customization or a Responsive CSS fix? Contact Me
    Lynne emasai.com

    #80827

    BMW
    Participant
    Post count: 16

    Worked like a charm. Thanks a million.

    But like you said it applied it globally to all widgets on the home page.

    I’ve tried:

    .home-middle .featured-content .entry .gfwa-odd {
    width: 50%;
    float: left;
    }
    .home-middle .featured-content .entry .gfwa-even {
    width: 50%;
    float: right;
    }

    But that doesn’t seem to work.

    Thanks!

    #80829

    emasai
    Participant
    Post count: 648

    As I mentioned you need to target it more specifically, I used .ourproducts which seems to work.
    .home-middle .ourproducts .gfwa-odd

    Do this for gfwa-even too

    Having done this you will have to add these two tags into media queries at whichever break point starts looking bad and change the width to 100% and float: none.


    Need Website Customization or a Responsive CSS fix? Contact Me
    Lynne emasai.com

    #80831

    emasai
    Participant
    Post count: 648

    Are you able to add a class to your featured widget amplified plugin? If so that would be the way to target the css rule.


    Need Website Customization or a Responsive CSS fix? Contact Me
    Lynne emasai.com

    #80834

    BMW
    Participant
    Post count: 16

    I’m sure I could add a class, but I don’t know specifically how. :/

    I’ve added the .ourproducts to your previous code, but I’m still seeing full-width widgets. I’ve played around with width, but am struggling with my css.

    Thanks again

    #81409

    BMW
    Participant
    Post count: 16

    Still trying to figure this out. Thanks for any additional help.

    #81458

    emasai
    Participant
    Post count: 648

    Try this, go to your Great Kitchen Secrets post and scroll down to Layouts, you can add a Custom Post class. Call it “fullwidth” you can now style all the posts that have this class. Alternatively, you can add a class to your posts that you only want to display half-width.


    Need Website Customization or a Responsive CSS fix? Contact Me
    Lynne emasai.com

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.