[Resolved] Float right plugin exceed width layout

  • Author
    Posts
  • #3481

    andrewsapiens
    Participant

    Hi! I’m using Social Media Plugin with floar right but by doing so it is afeccting the site width. Can you Help?
    Screeshot
    Thanks!

    #3493

    Andrew Misplon
    Keymaster

    Hi Andrew

    Thanks for reaching out.

    Can you perhaps send me a link to the plugin’s page on WordPress.org? I’ll install it and find a workaround for the problem. I’m offline today but will be back at work tomorrow (GMT+2) and can assist further then, thanks for the wait πŸ™‚

    #3496

    andrewsapiens
    Participant

    Hi Andrew!!
    Thanks you for answer. Of course! here it is:
    Social Media Plugin

    Thanks again! =)

    #3498

    Andrew Misplon
    Keymaster

    Thanks for the wait πŸ™‚

    If you don’t already have a Custom CSS plugin installed, please, go to Plugins > Add New, search for and install a plugin called Simple Custom CSS. Next, go to Appearance > Custom CSS and insert:

    /* Page */
    #page {
    	overflow-x: hidden;
    }

    Let me know how that goes.

    #3510

    andrewsapiens
    Participant

    Hi Andrew! Thank you! unfortunately is still happening the same. But, when I do mouseover over the icons, it fixes automatically. very strange… What could it be?

    Test Image

    Thanks again!

    #3513

    Andrew Misplon
    Keymaster

    Would it be possible to send a link so we can take a look? If you’d like to keep your site private you can use the “Set as private reply” checkbox below the comment field. Thanks.

    #3517

    andrewsapiens
    Participant

    Hi Andrew! of course, no problem. Here it goes: FundaciΓ³n Taap
    Thanks!

    #3544

    Andrew Misplon
    Keymaster

    So sorry for missing your reply, please, feel free to bug me if that happens again.

    Any chance you could activate the social media plugin again so I can see the problem. Thanks for the wait πŸ™‚

    #3703

    andrewsapiens
    Participant

    Hi Andrew! Sure! I’ll activate de plugin again. Please let me know when you read this in order to do so.

    Thanks!!

    #3704

    Andrew Misplon
    Keymaster

    Awesome, thanks for that. I’m unfortunately, offline for the evening but will reply tomorrow morning GMT+2 and try line up a time that works for both of us. Appreciate the wait.

    #3705

    andrewsapiens
    Participant

    That’s perfect! Thank you Andrew. I’ll activate the plugin tonight GMT-5 So you can check this for me.

    Thanks again!

    #3707

    andrewsapiens
    Participant

    Andrew, the plugin is activated… And I have notice another issue, once it is activated the menu gets blurry. Here the screen print:

    Plugin Deactivated

    Plugin Activated

    Thanks!

    #3709

    Andrew Misplon
    Keymaster

    Thanks πŸ™‚

    If you don’t already have a Custom CSS plugin installed, go to Plugins > Add New and search top right for Simple Custom CSS. Install, activate and then go to Appearance > Custom CSS, insert:

    /* Overflow Control */
    body {
    	overflow-x: hidden;
    }

    Phew, so this plugin adds 3258 new lines of CSS. It’s pretty heavy if all it’s offering is the floating bar on the right. Most of the time this plugin does the right thing and prefixes it’s CSS rule name so as to not conflict with themes or other plugins, but other times it doesn’t. Deep in the CSS for this plugin is the following rule which is causing the menu issue:

    .scale, .scale-div {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    }

    Ultra uses the class scale too which is where the conflict is. You can try inserting the following at Appearance > Custom CSS to fix this:

    /* Plugin Conflict Fix */
    #masthead .scale {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    #3718

    andrewsapiens
    Participant

    Wow! Andrew you are a genius!! the overflow issue is solved!! Thank you so much!!!

    Sadly the “Plugin Conflict Fix” doesn’t worked and is still given the blurry issue. What else can we try?

    I have tried with “!important” but didn’t work.

    Is amazing that a plugin can give so many headaches. I hope it is worth it.

    Thanks again! πŸ™‚

    #3720

    Andrew Misplon
    Keymaster

    No problem πŸ™‚

    Try this:

    /* Plugin Conflict Fix */
    header.scale {
        -webkit-transform: scale(1) !important;
        -moz-transform: scale(1) !important;
        -o-transform: scale(1) !important;
        transform: scale(1) !important;
    }
Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

Scroll to top