Andy

[Andy]

The important thing to note is that a background image behaves differently to an absolute image that is put in the content of a page. They are rendered differently in HTML.

The background image in the header has to cover the whole of the header section, top to bottom and side to side, so when the aspect ratio of the area changes, then some of the image will be cut off from either the top/bottom or the sides, depending on the aspect ratio of the image and the aspect ratio of the device screen/browser window.

If you need the whole of the background image to always be visible (and displaying more like an absolute image that is placed in the content of a page), without anything being cut off, then you can use the following custom CSS to change how the background is displayed. But instead of seeing parts of the image being cut off, you will instead see empty space either above/below or to the sides of the image.

.main-header {
    background-size: contain;
    background-position: center;
}

[Andy]

In the Top Bar widget area where you have put your telephone number, you have incorrect HTML so this is causing other issues with the rest of the page.

You have written the telephone number with an opening <font> tag but no closing </font> tag, and an extra unwanted closing </a> tag, like this:

<a target="_blank" rel="noopener" href="tel:0544845546"><font style="font-size: 20px;">054-484-5546</a></a>

You should write it like this:

<a target="_blank" rel="noopener" href="tel:0544845546"><font style="font-size: 20px;">054-484-5546</font></a>

Or even better, like this:

<a target="_blank" rel="noopener" href="tel:0544845546" style="font-size: 20px;">054-484-5546</a>

[Andy]

It is responding correctly based on the height of the slider. Mobile screens are different aspect ratio than desktop/laptop.

You could try changing the height of the slider on mobile with this custom CSS, added to ‘Appearance‘ > ‘Customize‘ > ‘Additional CSS‘:

@media (max-width: 768px) {
    #home-slider-section .bx-viewport,
    #home-slider-section .slide {
        height: 300px !important;
    }
}

[Andy]

Your posts are ordered by published date, with the most recently published first.

The theme does not control this order or change it, as it is set by WordPress core, or possibly by a plugin that lets you change the ordering.
For example there may be plugins that order posts by modified date, or in reverse order etc.
Make sure you don’t have any such plugins active, or if you do there should be some settings in the plugin to change the posts order.

[Andy]

This Additional CSS will remove the heading underlines:

#comments h3.comment-reply-title:before,
.related-posts h3:before {
    background: transparent;
}

The author section already has border radius to the top left and right corners, and padding. To make all four corners rounded, add this Additional CSS:

.single .entry-footer {
    border-radius: 2rem;
}

[Andy]

Use this Additional CSS to change the ordering on the single post, moving the comments/reply section before the related posts section:

.single-post .site-main {
    display: flex;
    flex-direction: column;
}

.single-post .site-main article {
    order: 1;
}

.single-post .site-main .post-navigation {
    order: 2;
}

.single-post .site-main .related-posts {
    order: 4;
}

.single-post .site-main #comments {
    order: 3;
}

[Andy]

This Additional CSS will change the background of the author and previous/next sections:

.single .entry-footer,
.single .post-navigation {
    background: #ffffff;
}

And use this to change the comments/reply section (I’ve also added some padding and rounded corners):

#comments {
    background: #ffffff;
    padding: 2em;
    border-radius: 2rem;
}

In the code above, the background color is #ffffff. Change this to the color you want.

[Andy]

A couple of different ways to accomplish this;

Option 1.
Add this custom CSS to center both the sections and they will appear stacked one above the other:

.site-info, .site-info-right {
    float: none;
    width: auto;
    text-align: center;
    margin-top: 10px;
}

Option 2.
Add the same custom CSS as above to center the bottom footer area.

In ‘Settings’ > ‘Privacy’ deselect the privacy policy page so there is no page selected and click ‘Use this page’ to save. This will remove the auto generated link in the right of the footer.

Now go into the ‘Widgets’ area, and manually add a link to your privacy policy page in the ‘Footer Site Info’ widget area, in the same text widget that you are already using with your own copyright info.

[Andy]

The homepage sidebar is now available in the latest version of the theme.

After updating the theme, go to the Widgets area and you will see the new ‘Homepage Sidebar’ widget area.
Add any of your available widgets and it will display on your static homepage.

[Andy]

The homepage sidebar option seems to be missing in this theme, sorry about that!

Not sure why this was not included, as it is in our other themes, so I’ll get this fixed and issue a theme update ASAP.

[Andy]

This is the custom CSS you need to change these colors, and add a border.
Add it to ‘Appearance’ > ‘Customize’ > ‘Additional CSS’, changing the color values to the color you want.

@media (max-width: 1024px) {
    /* drop down menu */
    #site-navigation {
        background: #f9f9f9;
        border: 1px solid #000000;
    }

    /* sub menu within the main drop down */
    .main-navigation ul ul {
        background: #f6f6f6;
    }
}

[Andy]

Add this custom CSS at ‘Appearance’ > ‘Customize’ > ‘Additional CSS’

/* larger screens */
.entry-header.with-image,
.archive-header.with-image {
    min-height: 30rem;
}

/* mobile screens */
@media (max-width:768px) {
    .entry-header.with-image,
    .archive-header.with-image {
        min-height: 20rem;
    }
}

Change the min-height values to change the height.
You can use px instead of rem if you prefer e.g. min-height: 400px

[Andy]

In the gallery options in the panel to the right, there is the “Crop Images” setting. The default setting is on.
If this option is on then some of the images may be cut-off, so that all the images can display the same height on each line, if you have some images that have different aspect ratios.

To show the whole image, turn off the “Crop Images” setting, and each image will display with its original aspect ratio.

[Andy]

This custom CSS – added to ‘Customize’ > ‘Additional CSS’ – should center the content of the middle footer:

#middle-footer {
    text-align: center;
}

I’m not familiar with the widget you mention. Is this from a third-party plugin? If so, and the custom CSS above doesn’t work, please let me know your site URL and be able to take a look and advise further.

[Andy]

This ‘Additional CSS’ will center the top bar widget:

#top-bar .widget {
    display: block;
    width: 100%;
    text-align: center !important;
}

[Author]

Posts