Jesse Owens

Hi Zach-

Thanks for the great question, and thanks for using the Post and Page Builder for WordPress.

There are two ways you could fix this, depending on your design preference.

First, you could reduce the height of the block with the background using the padding adjustment tool, either on the top or bottom of the row:

Or, you can manually add a CSS rule to prevent the image from tiling, even in large blocks. This will be the most effective way to prevent it, regardless of the image size, but you’ll need to keep in mind that the default background color will be shown where the tiled image was previously. Navigate to Appearance > Customize > CSS/JS Editor and paste this line into your CSS Code field:

.background-parallax { background-repeat: no-repeat; }

Hi Heather-

You’re right- when I use Apple Pay it will pick up the shipping options *if I’ve set them* on the checkout page, but I can’t change it within the payment system.

As far as the Samsung browser issue- Samsung browser is basically the same as Chrome, but with a few “performance” enhancements added by Samsung to make the mobile web feel faster for users. Because of that, it has a very “sticky” cache.

What I mean by that is that it saves assets to the phone so they don’t have to be downloaded twice. When you add code to your style.css file, it’s a “static asset” that can be saved, but when you add CSS to the customizer, it is output in the actual code of the page itself, so that gets downloaded each time.

I suspect that you just need to clear the cache on your Samsung device. If I use a tool like browserstack to check, I can see your changes, for example on your contact form submit button:

Hello Aethon-

Thanks for your interest in Total Upkeep Premium.

You can use your Premium license on unlimited sites within the same business. For example, you can use the license on a Development, Staging, and Production website.

You shouldn’t share your license with sites that you’ll be delivering to a client, because your connect key is private and can be used to identify you and even make purchases of BoldGrid Connect Search stock photography.

Hello Peter-

Thanks for the interesting question, and thanks for considering Total Upkeep to transfer your WordPress Website.

While Total Upkeep does back up your entire Multisite network, including for transfers, you should keep in mind that it will be limited by the resources and PHP limits on both your origin server and the destination server. For a network that large, you’ll need a good amount of resources including Disk I/O, Memory, CPU usage as well as big limits on PHP Execution Time, memory limits, and other settings.

In your case, I’d recommend investigating manual migration techniques, such as Linux’s rsync command, which are more suited for transferring large amounts of data securely.

Hello MK-

Thanks for reaching out, I’m sorry to hear about the difficulty confirming your BoldGrid Central Account.

I checked on the account associated with the email address you used for this post, and it does look like it has been successfully activated. If you’re not able to log in with the password you originally set up, I recommend sending yourself a new password reset link and giving it another shot.

Keep in mind that the links do expire after a time, so make sure to set it as soon as you get the email.

Hi Tim-

If that’s the case, then the situation isn’t as bad as I had thought it was. As long as you can log into your dashboard without the URL switching on you, then you’re in good shape.

If you want a good way to find any stray links to the old staging site, I recommend checking out the free Better Search and Replace plugin, which you can use to search your entire website for occurrences of old URL, and replace them with the new URL.

If you do plan on using that plugin, do make sure that you get a good backup of your website first, just to be safe, because it will comb your entire database and make changes.

Hi Tim-

Thanks for reaching out, and thanks for using Total Upkeep to migrate your website.

Normally, when you use the Transfers tab to migrate your website, the site’s URL should automatically update to the new site’s URL, but if I recall correctly you may have had to restore your migrated backup manually. That means you’ll need to manually update the Site’s URL as well.

If you can log in to wp-admin and still see the live URL, then you can easily update this in the Settings > General menu.

If you log in to wp-admin and the URL switches to cloudwp.dev, then you’ll need to use another method to update the URL. WordPress.org has an article on several ways to update these settings if you’re not able to log into your dashboard (or if it goes to the old URL when you log in).

The method I most highly recommend is to use WP-CLI if you have access to SSH. Your hosting provider can also assist you with making the change.

Hi Dario-

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

Hydra doesn’t offer blog appearance customization out-of-the-box, but there are ways that you can customize it using Custom CSS in the Customize > Advanced > Custom JS & CSS menu.

If you’re looking for a more customizable blog experience without using any code, I recommend checking out our newest theme, the Crio WordPress SuperTheme.

If you can describe what you’d like to accomplish with your blog appearance in Hydra, we can take a look and help you further, as well.

Hello Riva-

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

Crio is fully open source, and you can browse the code or download a zipped copy of the full theme from the WordPress repository.

Experienced developers can also build new themes using the BoldGrid Theme Framework, which is available on our public GitHub account.

Hi Kathy-

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

Most of the issues occurring on your homepage are actually because of the custom margins and paddings. For one example, the buttons you have for “Pay Invoice” and “Schedule an Appoinment” are using a very large padding on the left so that you can achieve a “Right-Aligned” appearance. Instead, you should use the alignment tools:

And you can couple that with the drag-and-drop controls for the column widths. Here are a couple of videos where I demonstrate some techniques for customizing your blocks:

Hi Anne Marie-

I don’t have much experience using the image-rendering CSS attribute, but that’s an interesting idea. You can easily add the class to your image. Click on the logo, and then click on the Edit (Pencil) icon. Then look for the Custom CSS Classes option at the bottom, and enter sharp into the custom classes field:

Do keep in mind that, when you use the Zoom function in your browser, the image will always appear a little blurry if it’s a PNG or a JPEG, only a scalable image type like an SVG would be able to scale up in the browser zoom and still appear sharp.

Hi Reneeh-

Thanks for reaching out, and thanks for using Cloud WordPress staging for your new website.

This issue should already be resolved for you because our Premium Support team also received a ticket.

We were able to determine that the connection error was related to a firewall blocking our CDN, and the DreamHost team was able to fix that for us. If you have any other issues, please reach out and we’ll be happy to help.

Hello Adrian-

Thanks for reaching out, and thanks for purchasing The Crio Pro WordPress Theme.

First, you don’t need to remove your other websites in order to activate your Premium Key, so there may be something else going wrong with the process.

Since this is a public forum, we can’t discuss private details like your connect keys or billing, so I recommend that you reach out to our Premium Support team if you’re having trouble activating your Connect Key.

Hi Heather-

That’s really a head-scratcher! It looks like this might even be a bug in Firefox itself, because you can see the Firefox Developer Tools conflicting with itself:

While it’s true that the vertical-align: middle; rule only applies to inline elements, you can clearly see that this element is, in fact, inline.

I did find a workaround, however, by changing the parent element to a block, which seems to work as expected in both Chrome and Firefox:

.woocommerce form .form-row label.checkbox, .woocommerce-page form .form-row label.checkbox {
	display: block !important;
}

Hi Heather-

That does seem really weird. Even when I use Firefox, if I’m logged into Amazon, I don’t see the additional password field.

I glanced at the WooCommerce documentation, and I did notice that there is a setting about automatically creating the password, do you have that enabled?

Hi Heather-

Here’s an updated version of the third rule for the Amazon Pay image that should make it only apply to the Amazon image:

ul.payment_methods li label[for="payment_method_amazon_payments_advanced"] img {
  width: unset;
}

I compared the styles on the label for “Create Account” when logged-in with Amazon, and when not logged in, and the biggest difference is that some of the styles only apply when it’s using the ID #customer_address_details, which doesn’t apply when Amazon is providing the address. It looks like this rule should do the trick to make them match (including the purple gradient background):

p.create-account > label:nth-child(1) > span:nth-child(2) {
    background-image: linear-gradient(180deg, #ce7fed 0%, #2c0a45 20%, #2c0a45 80%, #ba59e0 100%, #ce7fed 100%);
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex;
    padding-left: 40px;
}

Finally, it’s really tough to troubleshoot the Apple Pay issue without a real Apple device (since our team is still working remote, we don’t have access to all of our testing machines from the office). When they say that “some of the elements are being loaded, and the JavaScript is not running properly,” were they able to provide you with any details?

For example, if the JavaScript is “not running properly,” was there an error message that they could provide, or did they know which elements were not being loaded?

I did try it out on an iPhone, and I was able to use the button and proceed through the checkout all the way up until the last step, and everything seemed to work correctly:

• This reply was modified 3 years, 6 months ago by Jesse Owens. Reason: Add lightbox for screenshot

Hi Heather-

You should see the update for Cobalt available now in your Dashboard, thanks again for letting us know!

Hi Heather-

Thanks for reaching out! I’m glad to hear you’re finding our support so great.

I was able to see everything you mentioned, with the exception of the Password field after I log in with Amazon. I only see the checkbox to create an account, so it doesn’t quite match your screenshot.

I did find some CSS rules you can use to tackle each of the other issues though:

#shipping_address_widget h3, #payment_method_widget h3 {
    font-size: unset;
}
#shipping_address_widget h3 a, #payment_method_widget h3 a {
    padding-left: 8px;
}
ul.payment_methods li label img {
    width: unset;
}
input#createaccount {
    position: relative;
    margin-top: unset;
}

The first rule fixes the large H3 elements for “Shipping Address” and “Payment Method.” The second rule is to add a little bit of padding on the “Change” link for both of those, because once the size was fixed, the “Change” didn’t have any space in between the heading and the link.

The third rule fixes the stretched out image, I’m not really sure why but it was being forced to 400 pixels wide, and it’s really quite a tiny little image, so we just unset the 400px rule.

Finally, the last rule fixes the issue where the checkbox for “Create an Account” was being shown on top of its label.

Right now, it looks like the logo is being displayed at 133×133 pixels across all different device sizes, and I don’t see bad distortion on the logo itself. The image that has the text in it, on the other hand, I can see some distortion. The size you should use for that one looks like 484×109.

One thing that might also help is to convert the images to .PNG files. Since they’re only 3-4 colors, using JPEG probably isn’t the ideal format for them, and PNG’s scale better than JPEG’s.

Ideally, both of these images would look better if they were converted to an SVG file, or “scalable vector graphic.” But WordPress doesn’t allow SVG’s by default (although you can find free plugins that allow you to use them), and they also take some skill to create with a vector image editing tool, such as Adobe Illustrator, or Inkscape for a free option.

Hi Ann Marie-

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

I checked on the URL you sent, and it looks like your header is full width right now. Did you already solve this?

There is an extra column on the left-hand side of your logo, which you can eliminate using the drag-and-drop column width tool in the Page Header editor:

Generally speaking, the way to toggle between full-width and contained is in the gray-colored Edit Section menu, where you’ll find the option for Section Width: