Hi there,

First of all thank you for your purchase! Let me answer your questions.

1. You can hide the header topbar by navigating to Appearance -> Customize -> Theme Options -> Topbar by setting the "Topbar" option to "Hide".

2. This can be hide by navigating to Appearance -> Widgets and remove all widgets from the "Header" panel on the right side of the screen.

You're welcome.

1. The recommend upload size for the slider images is 1920 (width) x 750 (height) pixels. If your uploaded image is bigger than that size it will automatically be scaled down to that size as you probably noticed. The best option is to scale/resize your images to this size with an image editor like https://imageresize.org/ 

Another option is to set a fixed height to the slider image with some custom CSS and make the image automatically fit this area:

/* Change slider image height */
@media (min-width: 992px) {
    .jumbotron .item {
        height: 500px;
        object-fit: cover;
    }
}

You can add above CSS to Appearance > Customize > Additional CSS. By changing the 500px value in the code you can adjust the height of the slider image.

2. This will also be possible with some custom CSS. Please use the following:

/* Change menu height */
@media (min-width: 992px) {
    .main-navigation > li > a {
        padding-top: 35px;
        padding-bottom: 36px;
    }
    .header .header-wrapper .header-logo {
        height: 99px;
    }
}

The above code will reduce the total menu bar height with 20 pixels. If you want to reduce it more simply decrease the 3 numeric values ( 35, 36 and 99 ).

Hi there,

Thank you for adding the screenshots.

Please replace the CSS from the first questions in my previous message with the following one:

/* Change slider image height */
@media (min-width: 992px) {
    .jumbotron .item img {
        height: 500px!important;
        object-fit: cover;
    }
}

This one should do the trick.

Hi there,

Please add the following CSS code to Appearance -> Customize -> Additional CSS:

/* Change slide caption position add background */
@media (min-width: 992px) {
    .jumbotron .jumbotron-caption {
        padding: 20px;
        background: rgba(0, 0, 0, 0.2);
        transform: translate(0%, 20%)!important;
    }
}

The code will move the slide captions to the bottom area of the image and will add a background with transparency.

- Change position of the captions

To change the horizontal position you can adjust the 20% value in above code. 

- Change opacity of background

To change the opacity of the background behind the captions you can change the 0,2 value in above code. The available range is 0 till 1, so for example 0.1 or 0.5 will work.

Hope this helps.

Hi there,

Unfortunately it is not possible by default to let # (hashtag) links jump to an element and position that section in the middle of the screen. This is native browser functionality and the browser jumps to the linked element and place it at the top of the browser window. In your case the top of the section is a little bit cut off because of the floating WordPress admin bar at the top of the window.

The best option is to add an empty page builder row between the two sections with the image and add the ID to this empty row. On this way the "Prävention" section become more visible in the view area of the browser window, please see attached screenshot.

If you really want to position the section in the middle of the browser window you need to install a plugin like Page scroll to ID. With this plugin you can manage the "offset" which allows you to set the position where the scroll animation need to stop before the section.

Hope this helps, if you have any questions feel free to ask.

Great!

Unfortunately there is no plugin that allows you to do this so specific but with the Advanced Floating Content plugin you can do this by simply adding the round circle with text as an image.

The fixed position can only be set top top or bottom and left or right I need to say.

You can change the heading and body font via Appearance -> Customize -> Theme Options -> Typography

You're welcome.

If you want this text to be in one single horizontal line you have 2 options:

- Increase the width of the page builder column that contain this text

- Decrease the font size of this text (see attachment)

Oops that was a misread from me, excuse me.

You have to add the content in some HTML to do this. If you're working in the "SiteOrigin Editor" widget please switch from the Visual Tab to the Text tab and add the following:

<div class="row">
    <div class="col-xs-1">[fa icon="fa-check"]</div>
    <div class="col-xs-11"><h2>Your text can be placed here</h2></div>
</div>

Set the header in a font weight of 500 will be possible with the following CSS:

/* change header font weight */
.main-navigation > li > a,
.main-navigation .sub-menu > li > a { font-weight: 500; }

But the 300 font weight is not included within the theme settings. The theme will only get the 500 and 700 font weights. If you would like to set the font weight for different text elements I recommend to use the Easy Google Fonts plugin. This plugin adds a new Typography panel to the customizer where you can change the typography of the theme with much more advanced controls.

Change fonts of Physio theme

Sure, you can switch back to the Visual tab and select the shortcode with your cursor to make it another color. I made a screencast of this: http://recordit.co/ccRGLe5LBx

Please only do this for changing the color, if you switch back to the visual tab to change the header text it might happen that the HTML code will be messed up.

1. Increasing the height of a font is technically not possible. In this case you can change the font to the same font of "Bus", or you can keep this font and increase the font size to match it with the font size of "Bus".

You'll have to add a custom class to the specific icon box and then target it with custom CSS to make the changes. 

- Edit the icon box and click on the "Attributes" panel in the top right of the modal

- Add "custom-iconbox" (without the " ") to the Widget Class input field

- Save the page

- Navigate to Appearance -> Customize -> Additional CSS and add one of the following CSS code (do not add them both):

To change the font to the same font as "Bus" please use this:

.custom-iconbox .icon-box .icon-box--description {
    font-family: 'Work Sans';
    font-size: 18px;
    color: #464646;
}

Or if you want to keep this font but only increase the font size use this one instead:

.custom-iconbox .icon-box .icon-box--description {
    font-size: 18px;
}

2. Is there any possibility I can see the website live? It makes it much easier for me to provide the correct CSS. For now, this should decrease the space between:

.footer .footer--top .footer--top-container {
    padding-bottom: 0;
    border: none;
}
.footer .footer--top .widget {
    margin-bottom: 20px
}

3. I'm sorry but we don't provide support for 3th party plugins unfortunately. Theme support only covers our theme and the plugins that come as default. If I can take a look at the front-end of your website I can provide you some simple CSS that will force remove the shadow effect. However I do recommend to take a look in the settings of this plugin and see if there is any option there to remove it instead of using CSS fixes.

The shadow effect comes from an empty caption element on the slides. Please check again if you can remove or disable the captions, this will automatically remove the shadow effect on the slide images.

If there are no options for this the following CSS will force remove it too:

.metaslider .caption-wrap { background: none!important; }

Great!

1. I assume in this case you mean the length of the text so it won't run out of the mobile screen? If I check the first attached image the best option is to remove the left padding for mobile devices, or at least decrease it a little bit. So the text stay within the visible area of the mobile device.

Please read point 2 to see how to change the padding for mobile devices.

If you want to decrease the font size for this text please read point 3 how to do this.

2. The image is small because the SiteOrigin Editor widget that contain this image have a left and right padding of 100 pixels. Please edit this widget and below the "Padding" option you will see the "Mobile Padding" option. If you enter a 0 value in all 4 input fields the image will be displayed at maximum size for mobile screens.

3. The best option is to remove the font size x-large from the inline HTML (switch to the text tab, remove the style attribute that define the font-size: x-large and switch back to the visual tab). Then within the "Attributes" panel on the right side you can add the following to the "CSS styles" field:

font-size: 20px;

and this to the "Mobile CSS styles" field:

font-size: 15px;

The size values can be changed to your own needs.