Jesse Owens

Hi Cheyenne-

Thanks for the question, and sorry to hear about the frustration.

You’re right that when you’re using the Responsive Design settings in the Post and Page Builder that the checkboxes hide the elements on that type of device.

The only thing that comes to mind that might cause those to still be hidden when you switch back to the desktop view is that the editor’s viewport is still too narrow. That would “trick” the editor window to display the mobile styles. Here are three things you can check to make sure.

First, try hiding the left-side dashboard menu to make your editor full-width. Scroll all the way down and look for the < Collapse Menu option.

Second, try switching to single-column view. Look for Screen Options at the top-right of the screen, expand it, and select Layout > 1 Column.

Finally, make sure that you’re not “zoomed-in” with your browser. Usually, you can adjust this with CTRL + Minus and CTRL + Plus (or CMD on a Mac). When you’re zoomed-in, the result is similar to viewing it on a smaller device.

Hello Lisa-

Thanks for reaching out, I know it’s frustrating to feel like you’re going backwards. Crio is a responsive theme, but it does look like there’s a bug in the way the buttons are scaling down.

I checked out your “Get Involved” page, and it looks like you’ve already solved the issue with the one-word narrow columns, but I can see that your button text is still running off the screen. I’ve reported the bug with the buttons so our developers can fix that in the future.

Here’s how you can fix it right now. Navigate to Customize > CSS/JS Editor and paste this snippet into your CSS Code:

a.btn { white-space: normal; height: unset; min-height: 40px; }

Hello Rachel-

Thanks for reaching out, we’ll do everything we can to help you get your contact form back.

If you started out building your website with the BoldGrid Inspirations plugin, then your contact form was most likely provided by the weForms plugin. When I take a look at your site, I don’t see any evidence that weForms is currently active.

First, double-check that weForms is still installed and activated in your Plugins > All Plugins list. Hopefully, simply activating it again will restore your form.

If it is already active, there are a couple of other things we can check. First, did the form first disappear when you switched to the Colibri Theme and Builder? Colibri does have its own Forms Component, though it should be compatible with other forms as well.

It also looks like you may be using some kind of performance optimization option, though I can’t tell exactly which one from looking. If that’s the case, try temporarily deactivating it to see if your form works without it.

Hi Mohamed-

The code above worked for me with Crio out-of-the-box, but depending on what modifications you’ve made it may need to change. It’s tough to say for sure without being able to look at your site while it has the maintenance mode plugin active.

Is it possible for you to use the WP Maintenance Mode settings to exclude a specific page so we can take a closer look for you?

Hello Feng-

Thanks for reaching out, and thanks for using the Post and Page Builder for WordPress.

It looks like your theme has a relatively small container for the main page content, only 67% of an already-contained page width:

I’m not very familiar with your theme, Responsive Church Theme, but if it offers an Additional CSS setting in your Customizer, you can add this CSS to make that container full-width:

main#content {
    width: 100%;
}

Hello Pawel-

Thanks for reaching out! There’s a couple big differences between your front page and the normal appearance of the Pavilion Theme.

First the biggest difference, the Pavilion theme is designed to have a contrasting background color or image in the header. Navigate to Customize > Background and choose either a color or background image, so that the header isn’t so much whitespace.

You have a few customizations on your site title that are adding to the different appearance. Using the overline text decoration put together with the white background and the text shadow is creating the white line above your title. You might be able to make this look normal just by changing the background color, but you might consider choosing a different text decoration. You can find these in Customize > Site Title & Logo section. There are also some custom positions in this section that are creating a lot of the blank white space.

Hello Cyndi-

Thanks for the question, and thanks for using the Crio WordPress supertheme.

Old Standard TT comes with a 700-Weight Bold variant. In the various areas of the Customizer, you can select 700 from the variant drop-down menu:

Hi Barbara-

Thanks for the great question! In the BoldGrid Florentine theme, this is only possible with Custom CSS. If you’re interested in a Theme that offers complete header customization without the use of any code, I recommend checking out our newest theme, the Crio Supertheme.

If you’d rather stick with Florentine, here’s how you can do it.

First, navigate to Customize > Advanced > Custom JS/CSS and paste this into your Custom Theme CSS:

#masthead aside {
	background-color: transparent;
	border: none;
}

This will remove the border and make the background transparent, so it will completely blend into your header design.

Hello Retta-

Thanks for reaching out, and thanks for using the Post and Page Builder for WordPress.

There are a few things that can cause this. Most commonly, you’ll just need to look for the Visual editor tab, at the top-right of the editor:

If you don’t see the Visual tab, it’s possible that your user profile may have the visual editor disabled. To check that, navigate to Users > All Users and click Edit underneath your username. Here, you’ll see an option at the top to Disable the visual editor when writing. If that’s checked, uncheck it and scroll down and click Update Profile:

Hello Laurence-

Did you get a chance to see my last reply? You can get in touch with our billing team directly at this address: https://w3-edge.com/contact

Hi Toby-

Thanks for letting us know, and thanks for using BoldGrid’s Cloud WordPress staging platform.

Our Systems team has made some adjustments, and the system should be stable again for you. Please let us know if you continue to experience issues.

Hi Sam-

Check out the reply I sent to your other question about that image here.

Hi Sam-

Thanks for the question, and thanks for using the Crio WordPress theme.

Background images will always have some kind of scaling, or worse, tiling depending on the screen size.

There are a few things going on that might be giving you trouble accomplishing this. It’d be tough to try and describe it all, but I took the liberty of re-writing your first block on the homepage so that you can simply paste this in.

First, switch to the Text editor tab. Highlight your code from the very top, until you reach the </div> just before the second section that starts with <div class=”boldgrid-section”>

Then, replace that section with this code:

Hello Rick-

Thanks for reaching out, I’m sorry to hear about the trouble logging in. I believe the “Welcome Letter” you mentioned is from your WordPress web host, InMotion Hosting. Their support team may be able to help you with the issue you’re experiencing there.

If you’re also having trouble logging into your WordPress website, we have a detailed guide with 5 different ways you can reset your WordPress Password. InMotion Hosting’s support can assist you with that as well, if you’re having trouble performing a password reset.

Hello Heather-

Thanks for the question, and thanks for using Cloud WordPress to develop your new website!

Both the customizer controls and the appearance of the site are determined by the theme itself, so I’d trust the support from Materialis Pro to have a greater knowledge than we do here.

Do you mind sharing the CSS they’ve provided so far, so we can get an idea of how they’re approaching it? I do see one image in particular where the physician’s face is cut off.

The tricky part to this is that the header at the top varies in height depending on the device. For example, on an iPhone X the header is 155 pixels, but on a desktop it is 120 pixels. It looks like there is some JavaScript that’s supposed to figure this out, because I see these lines just before the hero images:

if (window.materialisSetHeaderTopSpacing) {
	window.materialisSetHeaderTopSpacing();
}

It seems to me that “materialisSetHeaderTopSpacing” should accomplish what you’re looking for, but when I try to use this function from the browser console it says that it’s not defined.

Just from fiddling around with it, I think that this CSS should do the trick, but results might differ depending on the device since these sizes are computed with JavaScript. It looks like those two header sizes are pretty consistent across a breakpoint of 388 pixels wide, though, so give this a shot:

@media only screen and (max-width: 388px) {
    div.backstretch-item img { padding-top: 155px !important; }
}
@media only screen and (min-width: 389px) {
    div.backstretch-item img { padding-top: 120px !important; }
}

Hello Roz-

Thanks for the question, and thanks for using Total Upkeep to migrate your WordPress website.

It sounds like you need to install WordPress at your new hosting provider in order to use the migration process. Most web hosts have an automatic installer, for example Web Hosting Hub (the host for the website you mentioned in your question) has a WordPress installer that you can access directly from your cPanel.

We also have a detailed guide on installing WordPress manually here.

Once you have WordPress installed at your new host, you simply need to install the Total Upkeep plugin and you’ll be able to follow along with the instructions you mentioned.

Hi Dana-

Thanks a lot for the screenshot! That’s an issue we haven’t seen before.

I did try a testing installation with the WP Google Maps plugin alongside, and I didn’t have the same problem that you’re seeing. You’re running all the most recent versions and you’ve eliminated an issue with the browser itself.

Since you’re a DreamHost customer, and therefore a BoldGrid Premium customer, I recommend submitting a premium support ticket so we can take a closer look for you.

The easiest way to submit a premium ticket is directly from your main WordPress Dashboard page, using the BoldGrid Feedback widget. Alternatively, you can submit one in your BoldGrid Central Account.

Hi Stephen-

Thanks for reaching out, and thanks for using the Crio WordPress theme.

I’ll try to tackle each of your questions one-by-one.

1. On my mobile the background images are not appearing on my home page…

When I check out your page, they aren’t even working on the desktop site for me. I believe this is because the image URL’s are still using your DreamHost staging URL, ...dream.website, and they’re not loading because the SSL certificate is only good for your real domain. If I remove that part of the URL’s and look at the page, I can see the images working correctly.

I think the only reason you can see them on your desktop is because you already had the images in your browser cache from when you were working on the staging URL.

2 and 3. …on my ‘Home2’ page… The navigation dots are out of alignment in the mobile view… I have considered… using navigation arrows… [but] they are transparent.

It looks like some of the CSS is off on this particular Crio design. I’m going to let the developers know so we can get this fixed moving forward, but for right now you can add these two lines to your Customize > CSS/JS Editor, in your custom CSS Code:

ul.slick-dots {
    width: fit-content !important;
}
button.slick-arrow {
    color: var(--color-1-text-contrast);
}

This code should ensure the dots stay on a single line, and make your arrows always appear as a contrasting color to your color palette.

4. The headings on the slider don’t scale to mobile e.g some words go across 2 lines… is there a way to scale these headings for mobile only?

Automatically-scaling font sizes turn out to be pretty tricky, and we’re currently working on this feature for the overall Crio Theme. However, in this case I was able to find a good Custom CSS rule that will keep your headings reasonably scaled on mobile devices.

This rule uses a media query, so that it only runs on mobile devices. And then, it uses the special vw unit, which is based on the width of the window. It’s also assuming that you’re using H1 elements in your slider, like you are now:

@media only screen and (max-width: 768px) {
	div.slick-slide h1 {
		font-size: 6vw !important; 
	}
}

Hi J R-

Thanks for the great question, and thanks for using the Crio WordPress Theme for business.

This is a little easier to show than tell, so I made this short video on how to accomplish this for you, if you have about 3 minutes to watch:

Basically, if you can add a custom class to your section with the background, you can use a CSS @media query to remove the background for mobile devices. Here’s the CSS Code I used in the video:

@media only screen and ( max-width: 768px ){
	div.no-mobile-background { background: teal !important; }
}

Hi Dawn-

Thanks for the update, I’m sorry to hear that we still haven’t got you set up.

I definitely understand the frustration, you’re right that drop-down menus are a normal part of any WordPress Theme, and they do work with Venetian out-of-the-box, but not in custom locations like this.

I do want to point out that as a Web Hosting Hub customer, your BoldGrid Premium membership is included in your hosting subscription, and you don’t need to pay extra, either for Premium Support or any premium BoldGrid products.

We’re happy to help you get this working through a Premium Support Ticket and it won’t be of any cost to you. (Just be sure to log in with the email address associated with your Hub account)

• This reply was modified 2 years, 9 months ago by Jesse Owens. Reason: note Hub email address for premium support