I have the siteo rigin Testimonial widget, and I can (sort of) get it looking well in full-screen mode, but it looks ‘stupid’ in both tablet and phone views: photo size is odd; person’s name is oddly bold and large; the actual testimonial text is oddly small and top-aligned. I also have the site origin CSS plugin as well, but it only seems to work on my site Home page and this testimonial widget is on a different page. So a) how can I get this widget – photo, name-id, and testimonial text – to look ‘right’ in all three sizes?
testimonial widget not responsive
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Betty,
Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
To clarify regarding Custom CSS. You can navigate to a different page by clicking a link and then clicking the navigate to link that will appear above the inspector.
Hi, Alex – Thanks for responding.
re: testimonial looking bad on smaller screen sizes / ‘responsive’ not working – Here is my URL to this page:
http://happyhealthyfactoids.com/pb-test-home-page/ <– I may be making some changes to other parts of the page, but I'll leave the testimonial area alone till I hear back from you.
re: css – I think I’ve done that (found a forum stream with an answer re: how to get from Home page to other pages); but – I see so many many layers of code/css code that it’s really challenging to figure out exactly what is the single thing I’m supposed to change e.g. I’m in a widget – with ‘attribute, layout, design’ in the side in each; within a row (ditto all above); within a tool (pagebuilder); within maybe another tool (CSS editor); within a theme (North); within a wordpress website …??? Feels like I need to be a master of CSS to understand how these all relate: when I’m looking at a section on my web page – through which of these umpteen variables/elements/tools am I supposed to be making my change??? I’d love to see a video – with verbal words included:)! – explaining the relationships between all these tools / pieces. Looking at youtubes makes any one variable seems doable, but they all work together and THAT is unexplained, confusing, a bit scary (“look at the potential for me to screw my site up – Yikes!”), and …I just don’t get it.
Hi Betty,
Sorry for the delay. :(
Testimonials
I don’t think SiteOrigin Page Builder is set up to be responsive. Please navigate to WP AdminSettingsPage Builder and open the Layout tab and enable the Responsive Layout. If this doesn’t resolve the issue, would it be possible for you to send me an export for this widget? To do this open up the page with the widget and click layout. Then click import / export and then click download. Please upload the export to a 3rd party file hosting site such as teknik.io.
CSS
You’re overthinking things. Don’t worry too much about what is adding the markup, think about how the markup and CSS is. Please read these two MDN articles: Selectors and Specificity.
The latter of which is most important to you and will make it clear why you’re overthinking things. Basically, it doesn’t matter. The only thing that matters is that you’re more specific (or declared after the other CSS) than any previous selectors (this is really easy to do for the most part).
Also, while you’re at it, please be sure to watch the getting started guide.
Hi, Alex –
I’ve been working on content offline; just now getting back to putting it into site. Can you explain “I don’t think SiteOrigin Page Builder is set up to be responsive”? <– that would explain in general why my siteorigin widgets seem super-awkward in the various media-views. BUT – why in the world would I / anyone want to use your widgets then if they do NOT translate well between desktop-tablet-phone? I’m seriously confused: I must be missing something – if none of your widgets are responsive… I’ll have to stop using them, which means stop using PageBuilder..???? But – your live editor mode makes it easy to view my site in 3 different screen sizes (so understands importance of responsive layout), yet – not responsive??
FYI – my WordPress Admin/Settings/PageBuilder/Layout/Responsive was already set to ‘enable responsive’. Yet – my opening ‘Hero’ widget looks stupid / awkward in every view; my testimonial widgets still look bad in tablet and especially phone view.
As you can see, I am not getting it:). I tried to do what you ask me below, and send you an export of the testimonial widget (and my hero widget), but failed: I tried opening my page in many modes/ views and the only one that came close to your directions was: in WP Admin editor – I see a ‘layouts’ tab in my edit options, but when I click that, it only contains pre-built layouts …my page isn’t in there. This is the page I’m having so much trouble with: <http://happyhealthyfactoids.com/pb-test-home-page/> http://happyhealthyfactoids.com/pb-test-home-page/
… I can’t seem to be able to send you the export you wanted.
I’m struggling, and need to open my site. Should I skip PageBuilder entirely and just use WP widgets in North theme?…will that get me a fully responsive site?
Thanks in advance –
Barb
Hi Betty,
No, you’re misunderstanding what I said. I didn’t mean that in a general sense (as in, SiteOrigin Page Builder isn’t responsive), I meant it for your website (as in, your SiteOrigin page Builder isn’t responsive). Our widgets are responsive, but only when allowed. We made the responsive functionality optional so users can write their own, or if desired not have it be responsive at all (trust me, there are still people who don’t want responsive websites). Try disabling the responsive layout and then re-enabling it. That should force it to regenerate the CSS. To clarify, I said suspect, so it’s possible that this isn’t the solution.
To clarify, you’re more than welcome to use SiteOrigin Page Builder without using any of our widgets. They’re 100% optional and we’re don’t want to lock you into using our widgets. So please feel free to look for alternatives if you would prefer. Please note that the above mentioned responsive setting will be needed to be enabled so that they can be responsive also.
I’ve noticed that you’ve manually set line-heights for certain widgets. This is causing overlap on mobile devices. To clarify, the CSS styles field isn’t and can’t be responsive. We can’t plan around a custom style as we can’t decide for you if you want to use something or not.
Regarding the layouts modal. Are these other menu options not present for you?
That’s up to you. If you feel it would be worth sticking it out, you should do that. If not, don’t. That’s not something I can decide for you.
Hi! I have 3 questions/issues:
1) I can’t seem to just login to siteorigin and have your site recognize that I am already a Premium member. I don’t see where / how I am supposed to be able to a) login and enter any Premium workspace (I can get to free support forums…where I keep getting encouraged to sign up for Premium, plus I can see all sorts of ads to become Premium…I don’t see anything for me to contact you as a Premium member???
Even using this email, I am replying to a free-forum item…not reaching you as a premium member.
2) In my wordpress site, as I am trying to customize my North theme elements … I see this message “SiteOrigin Premium adds powerful features to NORTH (by site origin). They'll save you time and make your site more professional.” <— so it looks like my Premium ‘extras’ somehow aren’t available to me within my site???
3) I’d like answers to both above, please. On top of that, what I’m trying to do is have my site show pages in standard width with white as content background, so on desktop views with lots of space still on both left and right side of my screen … I want that outside are to be a color. But it seems like ‘background color’ applies always to entire screen view …I can’t seem to ID what ‘content background color’ is separate from ‘entire width of any screen background color’.
It’s when trying to figure this out by just trial and error within North theme customization that I keep running into that message as per (2) above.
Thanks for some help on these three items!
Barb
Hi Barb,
1. Okay so to clarify, the forums are intended purely for free support. If you would like to make use of Premium support, please follow the instructions found on this page. Please reference this thread.
There are no specific premium only locations on the website outside of maybe the dashboard. You find information regarding Premium support via the dashboard and your welcome email.
2. Have you installed SiteOrigin Premium? Typically only that will show if it can’t detect the actual premium plugin it’s advertising (which you have). Please navigate to this page and download Dashboard Premium. Then go to your website and navigate to WP AdminPluginsAdd New and upload / install the downloaded version of SiteOrigin Premium. Once installed please follow the next steps.
It’s also possible you haven’t input your premium code on your website, please navigate to WP AdminSiteOriginPremium license and input your premium license.
3. That’s not actually possible without custom CSS. Please navigate to WP Admin AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
.masthead-sentinel { margin-bottom: 0; } body .site-content .container { background: #0f0; padding-top: 30px; padding-bottom: 30px; } #colophon { margin-top: 0; }Adjust the content color above and then adjust the background color 9ie. the edges) via the typical customization settings group. Which can be found at WP AdminAppearanceCustomize, Colors.
You might also need to install the SiteOrigin CSS Editor.
Wow! Can’t wait to try all these out, Alex! Thanks for such quick and specific input…I’ll respond with more later once I’ve applied all this –
Barb