[mekki]

Hello everybody!
I have recently switched to Adonis free WP theme. It works well and looks nice (on 1920×1080 monitor). However, the page is not wide enough on higher resolution screens such as 2560×1440. Is there a way to make it full width on these screens as well?

Another issue I have with the website is that the main background image is not full screen in the phone web browser (see attached images). It works only in desktop mode. The theme would look much better if the image covered the full screen on the home page even on phones. Can that be fixed?

Here is a screenshot of Adonis theme on a high-res (2560×1440) screen:
Screenshot in portrait mode in 1080p (Developer options in Chrome) on PC:
Screenshot in portrait mode on Samsung Galaxy S7:

Would appreciate any kind of help. Thanks!

[Skandha]

@mekki: Thank you for using our theme. This issue will be fixed and updated in the next theme update very soon.

Please check out the pro version of the theme as well. The pro version has additional features available which is not available in the free version. You can always upgrade to pro.

Let me know if you have anymore issues!
Kind Regards,
Skandha

[mekki]

Thanks for the quick reply! I really like this theme and I am glad that I don’t have to switch to something else because of this. Do you have an ETA for the update? Thanks again!

[Skandha]

@mekki: The update will be released soon. I will let you know when the update is released.
For the time being you can use the following CSS Code to fix this.
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

#page {
    max-width:2560px !important;
}
#portfolio-section .wrapper,
#testimonial-section .wrapper,
#footer-instagram .wrapper {
	max-width: 2560px !important;
}

Let me know if this solves the issue
Kind Regards,
Skandha

[mekki]

@Skandha thank you very much for the help! It worked really well!

I have 2 more questions (they are not very important, but they would make this theme perfect) 🙂

1. Is it possible to make the main image on front page fullscreen on phones a well? In the following screenshot from my phone you can see that the front page reveals the content bellow the header image.

2. I would like to make the footer stick to the bottom of the page if there is not enough content on the page. I managed to do that by adding a CSS code in the Additional CSS option. However, it was stuck to the bottom of the browser window not the content. Therefore, it was covering the content and was always visible (even on the homepage with full screen image). Here is an image from my website that shows the footer “hovering” in the middle of the page:

Thanks for all the help. I hope I am not bothering you too much 😉

[Skandha]

@mekki: Please post in your site URL so that I can look into the issue and provide you possible solutions.

Kind Regards,
Skandha

[mekki]

@Skandha thanks!
this is my website: Link
this is the page where the footer doesn’t stick to the bottom because there is not enough content on the page: Link

[Skandha]

@mekki: For the first issue
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.custom-header-content {
    height:480px;
}

You can change the height according to your requirement!

You seem to have solved the second issue.
Let me know if this works out!
Kind Regards,
Skandha

[mekki]

@skandha thanks again!

Unfortunatelly, the 1. issue is not really solved. With that CSS the header will have a fixed height and it’s not going to be as responsive anymore.

I really like the way it works in the personal trainer theme. No matter how narrow or small the screen is, the home page has the header image covering the whole screen. However, in Adonis at some point (when viewing on devices with smaller screen) the content of the home page starts to show up at the bottom. I thought that Adonis should work the same way as The Personal Trainer theme.

Here is a comparison of the two themes with the same width page:

[Skandha]

@mekki: Replace the previous CSS Code by the following.
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.custom-header-content {
     height:100vh;
}

Let me know if this is what you want!
Kind Regards,
Skandha

[mekki]

@skandha: what a coincidence, I have just tried that…
it worked, kind of. The header image filled the whole page like I wanted it to. However, the site title is not in the middle of the screen anymore. It appears in the upper half of the page. That wouldn’t be the end of world, but the header image fills the whole screen on every page, not just the home screen and that’s a problem (i just want it on the home page).

I think I will just leave it as it is for now (it’s not a deal breaker), thank you very much for all your support!

[Skandha]

@mekki: To do it only in the homepage add .home before .custom-header-content in the previous code.

Let me know if this works out!
Kind Regards,
Skandha

[mekki]

Thanks! That worked! Just one little thing. The site title is not in the middle (vertically) of the page anymore. You can have a look here: Link

[mekki]

@skandha: Hi again! Just wanted to ask if you have any advice regarding the site title position? After using this code:

.home .custom-header-content {
     height:100vh;
}

…the header image works on phones like I wanted, but the site title is not vertically centered on the page anymore. I tried many things but I cannot make it centered for some reason. Do you know how to fix that?

[Skandha]

@mekki: I checked your site and you seem to have figured out how to vertically center the site title.
Let me know if the issue is resolved.

Kind Regards,
Skandha

[mekki]

@skandha: Hi! Unfortunately, I haven’t solved it yet (I haven’t changed anything since the last post). I think it depends on the screen resolution you are viewing the website on. My screen is 2560×1440 and the website lookes like this:

[Skandha]

@mekki: Replace this code which I previously provided you.

.home .custom-header-content {
     height:100vh;
}

with the following code.

 .absolute-header.home .custom-header {
     height:100vh;
}
.home .custom-header-content {
	position:absolute;
	top:50%;
	left:0;
	right:0;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	transform:translateY(-50%);
}

Let me know if this works out!
Kind Regards,
Skandha

[mekki]

@skandha: Thank you very much! 🙂 It worked really well!

[Skandha]

@mekki: Hello there, I hope I was able to resolve your issue. If it’s not too much trouble, I have a quick request: could you please leave an honest review?
https://wordpress.org/support/theme/adonis/reviews/#new-post
Your review will help others know what to expect when they’re looking for the support I offer. Even a sentence or two would be hugely appreciated. Thanks, and if there’s anything else at all that I can do to help, don’t hesitate to let me know. Have a good day! 🙂

Kind Regards,
Skandha

[mekki]

@skandha: Thanks again! You’ve been a great help! Of course, I will leave a 5* review. I’ll do it later today/tomorrow for sure (i don’t have access to my wordpress account at the moment).

[Author]

Posts