theme css issues

1. Within customiser i have set the logo but it does not appear on frontend

2. The website seems painfully slow and I cant seem the figure out why

3. Trying to insert a header so it loads on each page rather than setup an image on each page, hoping this will increase speed too. Trying to add a class and css to allow it to stretch full width. Do you think this is the best way to do it.

4. Thank you for the changes to the white space etc. Just got a bit more whitespace when viewing mobile/ipad devices through customizer

Support access granted

Thank you

  • Ash
    • WordPress Hacker

    Hello Chez

    #1: This seems to be a conflict with lazy loading in Smush pro. Would you please edit the theme (or ask the theme developer) to add a class or ID for the logo img tag, and then use that class or ID in Dashboard > Smush Pro > Lazyload > Include/Exclude > Classes & IDs section?

    #2: Your site speed is not bad, but you can do a bit better. I can see most of the criteria are good. You can improve on server response time which is a bit tricky. If you are on a shared server, then you may consider changing the server to a good host. You can try any VPS or dedicated server. Please note that, we offer 3 bronze level sites to host on our VPS server which is free within your package.

    If you are already on a VPS, then you have to work on the plugins you are using. It might be some plugins are creating multiple queries which generates some extra loads on the database. You can try Query Monitor plugin to check this: https://wordpress.org/plugins/query-monitor/

    #3: It depends. If you have just a simple image and if the image is size is low, then you can use the image in the header. But if you have lots of elements which can be a breakdown, then you should go with html/layout which will load faster.

    #4: I have added the following css:

    @media all and (max-width:782px) {
    #pl-34 #panel-34-2-1-0, #pl-34 #panel-34-3-0-0 {
    margin: 0 50px;
    }
    }

    Looks like it is okay now, please check and let us know.

    Cheers,

    Ash

  • Chez
    • Flash Drive

    Thank you,

    1. I will sort not sure how to do yet

    2. Was not aware of hosting, do you offer emails as well

    3. ok will go down html root, could you help with CSS to make it full width as per image underneath (large)

    4, Thank you

  • Nithin
    • Support Wizard

    Hi Chez,

    1. I will sort not sure how to do yet

    It’ll require editing the header.php in your theme folder where the logo is added. However, the steps can vary from one theme to another. Since support access to your website was disabled, I wasn’t able to check further regarding this.

    2. Was not aware of hosting, do you offer emails as well

    I’m afraid, we don’t offer email, what we recommend is using SMTP or mail sending service as mentioned in the following documentation:

    https://premium.wpmudev.org/docs/hosting/emails

    3. ok will go down html root, could you help with CSS to make it full width as per image underneath (large)

    Since support access to your website was disabled, I couldn’t check this further. At the moment what I could notice is a coming soon page. Please do enable support access so that we could check further.

    You can grant access from WPMU DEV > Support > Support Access > Grant Access, or check this manual: https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5

    Im confused about how smush works, from frontend it shows image too small 1×1 but they are 1000×470, it says make bigger

    Do you have lazyload feature enabled? 1px X 1px show occurs when you have lazy loading enabled, as the images only load once the page is scrolled the default container width of the image would be detected as 1px X 1px. We’ll be improving the workflow regarding this down the road so it would be

    “Image Resize Detection” feature is more of a feature recommended for an advanced user on where they could adjust the theme layout or register an extra image thumbnail size based on the recommendation. 1px noticed shouldn’t be an issue, and it’s something which you could ignore.

    Please let us know once you enable support access so that we could check other points you have raised. Have a nice day.

    Kind Regards,

    Nithin

  • Ash
    • WordPress Hacker

    Hello Chez

    Thanks for enabling support access. I have taken a look but unfortunately, I could not find the logo html in the source. However, this is a bit tough to search using the theme editor. Would you please contact the theme author? He should be able to do this easily.

    About the image, well I am a bit confused here. You have the same image below which is full width. Do you want the same image twice?

    Please let us know. Cheers,

    Ash

  • Ash
    • WordPress Hacker

    Hi Chez

    Please try the following css for the header image:

    .header--row-inner .builder-item {
    max-width: 100% !important;
    margin-left: 0 !important;
    width: 100% !important;
    }
    .header--row-inner .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0;
    }
    .header--row-inner .builder-item img {
    width: 100%;
    max-width: 100%;
    }

    Let us know if that works for you.

    Cheers,

    Ash

  • Nithin
    • Support Wizard

    Hi Chez,

    added the css but not stritching whole page like the image underneath,

    It seems like the support access to your website is no longer enabled. Could you please enable support access so that we could check further regarding this.

    You can grant access from WPMU DEV > Support > Support Access > Grant Access, or check this manual: https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5

    Please let us know once you enable access so that we could have a better idea regarding this. Have a nice day.

    Kind Regards,

    Nithin

  • Nithin
    • Support Wizard

    Hi Chez,

    Please try the following CSS:

    #header-grid > .header--row > .header--row-inner > .container > .row > .builder-item > div {
    width: 100vw;
    position: relative;
    }

    You can add the above CSS via the default WordPress customizer, under Appearance > Customize > Additional CSS.

    However, please do note that the image you currently have is smaller compared to the existing full-width image, so it would appear stretched once you apply the above CSS.

    That's the current image is:

    http://www.yourSiteuRL.co.uk/wp-content/uploads/2019/08/supportair-services.jpg

    This is the correct full-width image:

    http://www.yourSiteURL.co.uk/wp-content/uploads/2019/08/supportair-services-1.jpg

    You will also have to change the image path added via the default Customizer if you are looking to make sure the image doesn't appear blurred or stretched as shown in the screenshot.

    Regards,

    Nithin

  • Nithin
    • Support Wizard

    Hi Chez,

    1. seem to have lost menu to right

    The following CSS should fix this:

    #header-grid > nav > .header-main-inner > .container > .row > .builder-item > .builder-item--primary-menu {
    width: 97vw;
    }

    2. Logo seems big

    Please try the following CSS:

    .site-logo > .brand > img {
    width: 90%;
    height: auto;
    }

    To decrease or increase the logon size further, just edit the value of width in the above CSS according to your needs.

    3. header height seem bi

    I’m afraid, it’s not clear what you meant here. The current height is the maximum height of the image if you meant to increase the height then the image would appear stretched.

    Or you meant to move the image to the top so that it appears below the logo, and navigation menu? Please confirm so that we could provide CSS based on that.

    Regards,

    Nithin

  • Nithin
    • Support Wizard

    Hi Chez,

    Thanks for explaining further. Could you please check whether the following CSS helps:

    #header-grid > nav > .header-main-inner > .container > .row > .builder-item > .builder-item--primary-menu {
    width: 97vw !important;
    margin-top: -6%;
    }

    Please do let us know how that goes, and advise if I had missed out anything else so that we could check further. :slight_smile:

    Regards,

    Nithin

  • Nithin
    • Support Wizard

    Hi Chez,

    just one more thing, i have white space on each page below the large image, looked through and cant find anything with margin or padding

    Please try the following CSS, it should fix the space on every page:

    body > div.wrapper > header {
    margin: 0 0 -1% 0;
    }

    Please do check, and let us know if you need any further assistance. Have a nice day ahead.

    Regards,

    Nithin

  • Nithin
    • Support Wizard

    Hi Chez,

    I checked your website, and I could notice the mentioned issue on the website. I quickly disabled Hummingbirds Asset Optimization to see whether it makes any difference but I could still notice the section loading as shared in your screenshot.

    I don’t see anything specific in general that’s causing this behaviour, and most probably would be related to slow server speed. I could notice the homepage is taking a lot of time in general to load, the faster the page loads such anomalies would be reduced.

    Could notice the server, in general, is slow and is taking around 3-4 seconds to establish an initial connection. Could you please try increasing your websites server resources, and then check whether you still notice the same issue or not?

    You can create a php.ini file in the root directory, and add the following rules to increase the resources:

    upload_max_filesize = 128M
    post_max_size = 256M
    memory_limit = 512M
    file_uploads = On
    max_execution_time = 300

    The root directory is where wp-content, wp-includes, wp-admin folders reside. Please check this link for more info:

    https://premium.wpmudev.org/blog/increase-memory-limit/

    Once the server resources are increased, please do check whether it improves the server performance and whether the issue still exists as shown in the screenshot.

    Even after increasing the server resources if you still notice the same, then it might be mostly a theme-specific issue. To rule out any plugins are causing this, please do deactivate all the plugins except WPMU DEV Dashboard, and Page Builder plugin temporarily, and then check whether you notice the same issue or not.

    This would give a better idea of where to look at. Please do let us know how that goes.

    Regards,

    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.