Changing colors in Maywood theme

  • Unknown's avatar

    Hi,

    I have the Maywood theme and it’s not letting me change the colour of the background, buttons and some text.

    I’ve changed them in both the customiser and the block editor and they look fine when I’m in the edit screens, but when I preview they go back to the theme default colors. The red you see on the site is supposed to be blue.

    I’ve spent ages trying to figure this out and am starting to wish I had just coded the site myself. I’ve been a WordPress user for many years, but it seems glitchy with the new block editor. I don’t want to pay to upgrade unless I know I can fix the colour issue. As it gives me the option to change the colour I’m hoping it can work.

    Is this a bug in the theme perhaps? How can I fix this?

    Thank you!

    The blog I need help with is: (visible only to logged in users)

  • Hi there,

    I took a closer look and saw that the colors on your site were red (even though they were blue in the customizer) and it appears that there was some kind of issue with those customizations being shown on your site.

    However, I tried to “re-save” the changes (without actually changing the color) and for me they appear to show now. Can you confirm?

    You can see what I see here:

    Click to view image

  • Unknown's avatar

    You are amazing! Thank you so much!

    I tried re-saving it a thousand times but nothing worked for me. Can I ask where you re-saved? Was it in the customizer or the blocks themselves?

    I’m so happy you fixed it. I thought I was going to have to code from scratch instead so this has saved me loads of time. Thank you!

  • I re-saved in the customizer here: https://wordpress.com/customize/

    Hope this helps!

  • Unknown's avatar

    Thanks, Jerry.

    I have another question if that’s ok? My site is now live at petemergencychecklists.com but if I view the home page in mobile it isn’t fully responsive. The main header text doesn’t adjust to fit the screen and in the Tips to Calm Down section there is no space on the left of the text (the other sections don’t have this so not sure why this one isn’t working).

    Thanks again. :)

  • Hi again,

    I’m not sure what you mean by “main header text” as the word “header” can have a few different meaning.

    You mean the homepage title “PET EMERGENCY CHECKLISTS” or are you referring to some other text on the homepage? For me that text does adjust to fit, so perhaps I am seeing something different from what you are seeing?

    Here is my view on mobile:

    Click to view image

    in the Tips to Calm Down section there is no space on the left of the text

    I noticed that your Heading and paragraph text in that section is held within a “group block” and if you examine that block you can see it is using the “full width” layout setting, which tends to remove margins that would normally be there.

    If you switch that group from “full width” to “wide width” the text will have margins on mobile, same as the other sections.

    This is difficult to explain in words, so I recorded a quick video to show you how to do it.

    You can view the at this link: https://d.pr/v/j4SEbp

    hope this helps!

  • Unknown's avatar

    Awesome, thanks for fixing the margins. I think the group block was left from the theme settings. I should have changed it.

    The header I meant is the ‘Pet Emergency Checklists’ in your screenshot above. It shows ok for me in the mobile preview in WordPress but when I look it on my actual phone the text doesn’t resize. I’ve tried making a bit smaller but it still doesn’t work.

  • Can you visit this page (from your phone) and let us know what you see for “Operating System” and “Web Browser”?

    http://supportdetails.com/

    This will give us some extra troubleshooting info about your computer. Also Perhaps you can send me a screenshot so I can better understand the issue?  

    You can share your screenshot with us here so we can take a closer look: https://wordpress.com/media/petemergencychecklists.com/

  • Unknown's avatar

    Great, thanks. I’ve added two screenshots to my media library.

    I have an old, cheap phone! Operating system is Android 7.0 Nougat. I haven’t seen this issue happen with others sites though. Browser is Chrome 86.0 4240.75.

  • Hi there,

    I can see what you’re describing on my end, and also using responsive mode in my browser.

    It appears the problem is the custom size you’ve added for that heading:

    https://d.pr/i/3hKisL

    That sets your heading to a fixed font-size of 60px, so no matter the screen size, that’s the font size that’s used. If you used one of the presets from the size drop-down, that would resize automatically, as those use relative values for the CSS code that’s added in the background. But the custom value is not relative, so it doesn’t adjust.

    In other words, there’s no way to prevent this happening if you use the size setting in the editor to force that bigger font.

    The better way to make this font size change would be custom CSS, which would allow you to make this change using a relative value instead, but that will require the premium plan.

  • Unknown's avatar

    Thanks. I figured that was probably what it was.

    Would you be able to tell me how to set it up so that when I post the link on Facebook I get the image I want to appear? I chose a featured image but that doesn’t seem to make a difference. It currently displays the image above the Care Checklist section on the home page, which isn’t ideal. I’ve Googled but the only way I can see to do it is with Plugins.

    Thanks…again!

  • Would you be able to tell me how to set it up so that when I post the link on Facebook I get the image I want to appear? I chose a featured image but that doesn’t seem to make a difference.

    Setting a featured image is exactly what’s needed. But if you’d shared the link on Facebook before adding the image, that would have cached the preview on Facebook. So for any subsequent shares, Facebook just reuses the preview they already have in their cache, rather than checking your site for any changes.

    To have Facebook update the preview on their end, you must force them to clear their cache and re-scrape your site again. You do this by pasting your site, or a specific post/page’s URL in their debugger at https://developers.facebook.com/tools/debug/

    Paste your URL in there, and click Debug. That will show you the preview Facebook currently have for the page. Then click Scrape Again. That will force Facebook to check your site for any changes.

  • Unknown's avatar

    Great resource, thanks! It worked after I also ‘CTRL F5’d my Facebook.

    Thanks so much for all the support. I’m very impressed with the support here and it’s been so helpful. Very much appreciated.

  • The topic ‘Changing colors in Maywood theme’ is closed to new replies.