CODEWITHSUNDEEP
cssfacebookwidgetwidthsidebar
Ross Symonds
Ross Symonds

Reputation: 79

Increase Size of Widget

This link shows my issue http://www.rosstheexplorer.com/comparisons-between-australia-and-europe/. I do not want the widget to say 'Ross The Exp...' I want it to say 'Ross The Explorer'. I also want to be able to see the 'Share' button.

enter image description here

The issue only occurs on large screen devices. I tried solving the issue by altering the height and width of the plugin but that did not solve my issue. I managed to get it to display 'Ross The Explorer' but I lost the 'Share' button by doing that.

I spoke with the developer of the plugin, he said Facebook controls the font sizes of the widget thus meaning I cannot simply reduce the font size of the text.

I looked at media queries in the CSS code and found the following for large devices 

@media screen and (min-width: 50em) {


    .content-area {
        float: left;
        width: 100%;
        margin: 0 -30% 0 0;
    }

    .site-main {
        margin: 0 30% 0 0;
    }

    .site-content .widget-area {
        float: right;
        overflow: hidden;
        width: 25%;
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

I then used the Internet Explorer Develop Tools to examine my code. I increased the width of the widget area to 28%. I thought this would enlarge the widget without disturbing the other content on the page. It looked my my plan had almost worked, the fact the 'share' button had still not appeared on the widget did give me some doubts though.

enter image description here

I went to my CSS files and made the change.

enter image description here

Then I reloaded my word press pages and it looked as if the width was still 25%. I used the developer tool and that confirmed the width was still 25%. In the CSS file it is saying the width is now 28%. Could someone clarify why this error is or may be occurring? enter image description here

Thank you

Upvotes: 0

Views: 671

Answers (4)

Ross Symonds
Ross Symonds

Reputation: 79

I was able to rectify the issue by clearing the cache and choosing a different FB plugin.

Thanks everyone for their help 😎

Upvotes: 0

Ross Symonds
Ross Symonds

Reputation: 79

I spoke with the plugin developer and he says Facebook controls the font sizes of the widget. I have now updated my question with new details / screenshots.

Upvotes: 0

Ritu Singh
Ritu Singh

Reputation: 171

it seems you might have put some limit on the number of characters visible on screen.Check if some limit is there where you are rendering 'Ross The Exp...'. Apart from that try this

/* Media Queries */
 @media screen and (min-width: 75em) {
  .site {
    max-width: 1153px;
    margin: 0px 0px 0px 0px;
    padding: 54px 108px;
    }
   }

also provide parent div to widget that will make the widget responsive as

<div class="col-md-12 col-sm-12"></div>

Upvotes: 1

Praveen
Praveen

Reputation: 1005

/* Media Queries */
@media screen and (min-width: 75em) {
    .site {
        max-width: 1153px;
        margin: 54px auto;
        padding: 54px 108px;


    }

.site-content .widget-area {

         1dro._1drp {
            font-side:16px
         }
}

Add the above style inplace of your mentioned style in the aove

Upvotes: 0

Related Questions