Adonis free - page width on Hi-res monitors

This topic has 20 replies, 2 voices, and was last updated 6 years, 3 months ago by Skandha.

Viewing 20 posts - 1 through 20 (of 21 total)

1 2 →

Author

Posts
August 15, 2018 at 4:39 am #151699

mekki
Participant

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!

August 16, 2018 at 12:03 am #151775

Skandha
Participant

@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

August 16, 2018 at 4:46 am #151796

mekki
Participant

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!

August 17, 2018 at 12:34 am #151891
Skandha
Participant
@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
August 17, 2018 at 4:21 am #151934

mekki
Participant

@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 😉

August 17, 2018 at 6:50 am #151961

Skandha
Participant

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

Kind Regards,
Skandha

August 17, 2018 at 7:20 am #151962

mekki
Participant

@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

August 21, 2018 at 5:09 am #152210
Skandha
Participant
@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
August 21, 2018 at 6:03 am #152212

mekki
Participant

@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:

August 21, 2018 at 6:35 am #152218
Skandha
Participant
@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
August 21, 2018 at 6:41 am #152219

mekki
Participant

@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!

August 21, 2018 at 6:49 am #152220

Skandha
Participant

@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

August 21, 2018 at 7:20 am #152222

mekki
Participant

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

August 23, 2018 at 5:57 am #152326
mekki
Participant
@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?
August 23, 2018 at 7:13 am #152370

Skandha
Participant

@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

August 23, 2018 at 8:03 am #152374

mekki
Participant

@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:

August 24, 2018 at 2:07 am #152429
Skandha
Participant
@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
August 24, 2018 at 2:31 am #152435

mekki
Participant

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

August 24, 2018 at 2:35 am #152437

Skandha
Participant

@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

August 24, 2018 at 2:39 am #152438

mekki
Participant

@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