Moving the home page Twitter widget to the top of page

egtg · Member · Apr 24, 2015 at 4:59 am
Copy link

Add topic to favorites
Hi,

I’m using the Nowell premium theme. We’d like to keep our Twitter widget on the home page and we’d like it to be the first thing people see on their phones. As it is now, the widget gets squashed in the mobile view.

If we put it in the sidebar it gets hidden behind a tab that says EXTRAS in the mobile view. I’ve been told by Nowell that there is now way to change the word EXTRAS.

Is there a way to keep it readable (not squashed) in the mobile view via CSS?

If not, Is there a way to place it above the content with CSS? I tried a bunch of things but no luck.

Any ideas would be appreciated. I’ve already contacted the theme’s support and they didn’t have a solution.

Thanks in advance,
Rosemary

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 26, 2015 at 3:02 pm
Copy link
Hi Rosemary, firstly, you are not allowed to hide the WordPress.com and theme footer credits per our Terms of Service (#11). Even the VIP sites here at WordPress.com (CNN, Time, etc.) are required to keep the footer credits. See the Frequently Asked Questions on the Custom Design support page for more information.

You are allowed to restyle the footer credits to better fit with your design as long as they remain readable. If you replace the rule you have in your CSS now with the following, it will make them less noticeable, but they will still be there and readable.
```
.credits a {
    color: #bbb;
    text-transform: none;
    font-weight: normal;
}
```
On mobiles, there really isn’t room to keep the twitter widget and the content visible side-by-side, and the way the HTML and CSS are organized, keeping the twitter widget at the top would be difficult. With the twitter widget forced to the right on mobiles, both it and the content are too narrow, in my opinion, and currently the content is partially hidden by the twitter widget and the twitter widget is partially off the right side of the screen.

I’ve tried a number of solutions and none of them has worked cleanly.
egtg · Member · Apr 27, 2015 at 2:56 am
Copy link
Hi, Thanks for the response. I wanted to move the widget to the top above the content since it doesn’t work side by side. It defaults to the bottom of the page.

Will add the WP credit back but really think that’s ridiculous for paying customers and would not be surprised at all if my clients decide that Squarespace is a better option.

If it were a freebie, definitely yes, the credits should remain. But since we bought the Nowell premium theme ( a very inflexible, low on features, as it turns out theme) and the premium bundle (half of which we don’t need or want) We should have the option of taking the credit off. Especially since it says something dorky if I remember correctly, like this wonderful blog is powered by WordPress or something that makes you think immediately “That’s gotta go! ” Also, we are not blogging, it’s a web site.

If it said “This site powered by WordPress” that would not be a problem at all.

Maybe WP should re-think this policy for paying/subscribing customers? Just a thought.
g471n · Member · Apr 27, 2015 at 3:59 am
Copy link
Hi Rosemary

Try adding the the following custom CSS:

.entry-content, .entry-summary, .page-content, .comment-content {
word-wrap: break-word;
padding-top: 24em;
}

.widget-area–home-widgets {
float: left;
width: 30%;
position: absolute;
left: 10%;
top: inherit;
clear: both;
z-index: 9;
}

Let me know how this works for you.

Gavin
egtg · Member · Apr 27, 2015 at 5:57 am
Copy link
Hi Gavin!
You’re a genius. Worked like a charm
Thank You!
g471n · Member · Apr 27, 2015 at 6:06 am
Copy link
fantastic :)

thank you
g471n · Member · Apr 27, 2015 at 6:38 am
Copy link
I just had a look at your site on my iPod and the Twitter widget is covering a bit of your “Today’s Specials” title.

I suggest changing padding-top to 26em like this:

.entry-content, .entry-summary, .page-content, .comment-content {
word-wrap: break-word;
padding-top: 26em;
}
g471n · Member · Apr 27, 2015 at 6:42 am
Copy link
I also see that this is adding padding to all your other pages that don’t display the Twitter widget leaving a space at the top of each page.

Hang on and I’ll find you a solution.
g471n · Member · Apr 27, 2015 at 7:00 am
Copy link
Ok … try this:

#post-1 .entry-content {
padding-top: 26em;
}
egtg · Member · Apr 27, 2015 at 7:11 am
Copy link
Thanks for checking Gavin. totally appreciate it. I added the CSS and it
seems to work fine.

The widget doesn’t show up at all on my iPhone 4 which is weird, but it shows up fine on an iPad mini and on both of my clients phones. One has an iPhone and one uses Android so it must be my phone…which is old.

Many Thanks again!

No items found.