Return to previous page

Homepage's full height to fit into full screen (no matter the size of screen)

This topic has 29 replies, 4 voices, and was last updated 4 years, 11 months ago ago by Rose Tyler

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

October 3, 2019 at 13:19

Hi,

I wonder if there is a way to make the Homepage’s full height to fit into full screen (no matter the size of screen/browser).

e.g. setting like this: https://prnt.sc/pebvcw or, if any other way to simply fit homepage height into whatever size screen/browser window？

Thanks

#222498 Copied Theme version: 5.5 WooCommerce version: 3.6.5

28 Answers

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

October 3, 2019 at 13:25

or otherwise if has any custom css can do above same thing if the xStore theme has no such setting.

With thanks,
Kevin

#222499 Copied

Rose Tyler

Support staff

October 3, 2019 at 15:06

Hello,

A row has “Full height” option http://prntscr.com/pedvif Is this what you are looking for?

Regards

#222505 Copied

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

October 4, 2019 at 03:27

Hi Rose,

Thanks for your reply. It is not that option, I think that is only for that Row, I would need the whole page (ONLY for homepage) to fit it’s height into screen height (no mater screen / browser size), the whole page includes top section to bottom copyright section all fit to screen height. i.e. for homepage, no scrolling needed.

Thanks again
Kevin

#222531 Copied

Olga Barlow

Support staff

October 4, 2019 at 06:36

Hello,

Look, everything depends on content you plan to display there. If it’s higher than screen height you’ll get scroll anyway. Could you provide us with mockup of your home page to suggest you the best way to achieve what you want?

Regards

#222536 Copied

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

October 4, 2019 at 09:30

It’s under consideration as an option plan to minimize/cut the content on homepage to enable faster loading like a landing page… just want to understand technical possibility.

#222538 Copied

Rose Tyler

Support staff

October 4, 2019 at 09:50

Hello,

To give you a solid response we should fully understand the desired result.
For example, this page https://xstore.8theme.com/demos/coming-soon-black/ – http://prntscr.com/peq5eb

Regards

#222545 Copied

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

October 4, 2019 at 10:26

ok I will try this out to see the effect, thanks.

#222548 Copied

Rose Tyler

Support staff

October 4, 2019 at 10:49

You’re welcome!

Regards

#222549 Copied

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

October 8, 2019 at 07:48

Hi,

I got few questions below if you could please help me out, much appreciated.

1)There is one issue here: correct one – https://prnt.sc/pgagme compare to Wrong ones – https://prnt.sc/pgah0a , https://prnt.sc/pgahbw, etc., i.e. on other pages other than Home, you can see the space before Home menu is “zero”, but it should be like the 1st screen shot there is a litter space ahead of Home menu text, how can we fix this….?

2) How can I widen the space between menus? please see: https://prnt.sc/pgaifr , and https://prnt.sc/pgajom, these two places need to change red space wider like the marked green space, where can I touch to make such changes?

3) https://prnt.sc/pgajom on each product page, the text area (green box area) needs to be lift up a bit to be on same line as same top of the left image, how can I remove that space gap…?

Thank you in advance, really appreciate for you help here.

Cheers,
Kevin

Please contact administrator
for this information.

#222771 Copied
John Holden

Support staff

October 8, 2019 at 09:47
Hi,

1. Add below code to Theme Options -> Additional CSS
```
.navigation-wrapper .menu-wrapper:first-child > .menu-main-container > .menu > li:first-child > a, .container-wrapper > .header-logo + .menu-wrapper > .menu-main-container > .menu > li:first-child > a {
    padding-left: 0.535em;
}
```
2. Space between menu items

Add below code to Theme Options -> Additional CSS
```
.menu-wrapper .menu > li > a {
    padding: 0.77em 0.535em;
}
```
3. I have fixed it

Regards,
Hung PD
#222781 Copied
GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

October 9, 2019 at 00:19

Thank you Hung ! Brilliant !!

#222831 Copied

John Holden

Support staff

October 9, 2019 at 04:15

Hi,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

If you have a quick minute we always appreciate a 5-star rating on our theme!

https://themeforest.net/item/xstore-responsive-woocommerce-theme/reviews/15780546

Your feedback is the motivation to improve our work and services.

Regards,
Hung PD

#222833 Copied

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

October 9, 2019 at 09:58

Yes I just posted 5 stars review the 3rd times there (I did twice before all with 5 stars), I truly love the technical support here, absolutely important and helpful to my work.

#222858 Copied

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

October 9, 2019 at 10:03

btw, is there any backend setting where I can “remove” or “hide” this section on every pages? https://prnt.sc/pgtzue , or please tell if any css I need to add and where to do so?

Thanks again,
Kevin

#222860 Copied

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

October 9, 2019 at 10:19

Hi Hung,

I just found, I followed your additional css, it works, but as I myself added a bit more space btw the main menu texts, I found some little issues here, please see:

https://prnt.sc/pgu5fm https://prnt.sc/pgu6l9 https://prnt.sc/pgu7hh

So the actual css lines I added in theme option / addition css field are as below — based on your css lines:

=======================================
.navigation-wrapper .menu-wrapper:first-child > .menu-main-container > .menu > li:first-child > a, .container-wrapper > .header-logo + .menu-wrapper > .menu-main-container > .menu > li:first-child > a {
padding-left: 2.535em;
}

.menu-wrapper .menu > li > a {
padding: 1.77em 1.535em;
}

.woocommerce-tabs.tabs .tabs-nav li {

margin: 0;
padding: 5px 50px;

}
======================================

#222861 Copied

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

October 9, 2019 at 11:00

A side general question: What are the differences for below 4 x places CSS tuning, or are they same (e.g. 1/2/3) ? And, which place do I need to add “! important ” to make it really works? This thing confused me for sometime so far… Thanks a lot.

1) Theme Options -> Additional CSS
2) Child Theme / style.css
3) Theme Options -> Custom CSS
4) Custom CSS in individual pages

#222864 Copied

Olga Barlow

Support staff

October 9, 2019 at 16:23

Hello,

1) If you need to manage the space between items use the menu settings https://www.8theme.com/topic/homepages-full-height-to-fit-into-full-screen-no-matter-the-size-of-screen/#post-222864
2) To hide breadcrumbs use breadcrumbs settings https://gyazo.com/4934e2bc0495e5933c7cd38829578825
3) Priority is the following (a – most important, c – less important)
a) Custom CSS in individual pages
b) Theme Options -> Theme CSS and Theme Options -> Additional CSS
c) Child Theme / style.css
The “! important” keyword depends on rule in the parent theme style.css and hierarchy of selectors that you plan to use to overwrite parent styles.

Regards

#222889 Copied

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

October 10, 2019 at 07:38

Thanks for above reply, it is very helpful !

For the 1) answer you wrote” “1) If you need to manage the space between items use the menu settings https://www.8theme.com/topic/homepages-full-height-to-fit-into-full-screen-no-matter-the-size-of-screen/#post-222864” , I see you have fixed the issue, but I am not sure about this replied, the link goes to this same page? And I went to Theme Option / Menu setting, or Menu Styling, I can’t find any changes made there…?

Thanks again, much appreciated.

#222925 Copied

Olga Barlow

Support staff

October 10, 2019 at 10:33

Hello,

Sorry, I added the wrong link in the previous answer. Here is correct one https://gyazo.com/9216e767487be0ebfede96e1463bc53d

Theme Options > Header builder > Menu > edit the box model paddings for the menu items.

Regards

#222953 Copied

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

October 11, 2019 at 09:52

Thanks for the prompt reply, very appreciated.

There is one thing on the mobile view, the homepage banner image, seems it is NOT responsive… as in mobile view, this top banner image won’t shrink itself to fit the mobile screen but only cut to show a small part of the image, please see the image here https://prnt.sc/phtqx9 , is this by purpose to display like this or the Responsive feature is missing here? Is there a way to let this image to shrink and fit to the screen width e.g. something like this https://prnt.sc/phtrg6 to still show full image bu in smaller size on mobile?

Thanks, Kevin

#223035 Copied

Olga Barlow

Support staff

October 11, 2019 at 14:52

Hello,

I would recommend you to check the Revolution slider video tutorials to be able to adjust layers on the different devices (change the position, size et) https://gyazo.com/eff9a30b406b479df1ee27c148e8f958 and also manage the slider size for the different devices, for example, https://prnt.sc/phy1tx

Regards

#223065 Copied

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

October 14, 2019 at 04:48

thank you, it’s helpful.

btw, for the fonts of website, I see the google fonts are selectable, so that means all google fonts (i.e. Latin, and Latin Extension) are usable in our website right? and also to confirm all the texts everywhere within the website are changeable on fonts?

Thanks again!
Kevin

#223165 Copied

John Holden

Support staff

October 14, 2019 at 06:53

Hi,

1. for the fonts of website, I see the google fonts are selectable, so that means all google fonts (i.e. Latin, and Latin Extension) are usable in our website right?

2. and also to confirm all the texts everywhere within the website are changeable on fonts?

– That’s right.

Regards,
Hung PD

#223170 Copied

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

October 14, 2019 at 09:58

Thanks for your reply.

Would you please have a look at this: https://prnt.sc/piyxln I need to 1) remove that top line (first green cross place), I disabled breadcrumbs and it works for rest of page but still exist on blog pages like this one, I also turned off “return to previous page” on the right of this line so it’s ok for this, just the leftover on this line, how could we remove it on blog pages as well?

And,

https://prnt.sc/piyxln still this screen shot, the second green crossed box, I want to remove that much space, as you can see the space between the title and the image is too large, I want to remove the green boxed area space, how could we do this?

heaps of thanks.

Regards,Kevin

#223174 Copied

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

October 15, 2019 at 02:26

Hi , the above last post please ignore it now, it’s all good now, thanks.

#223189 Copied

John Holden

Support staff

October 15, 2019 at 04:40

Hi,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

Regards,
Hung PD

#223196 Copied

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

January 10, 2020 at 09:55

Hi,

Could you please let me know, after my support period (6 months), what will happen to this account here, will I be able to login and see all my past questions and answers here? Thank you for your support as always.

Regards, Kevin

#228028 Copied

Rose Tyler

Support staff

January 10, 2020 at 10:51

Hello,

You will be able to read posts but without the ability to submit new topics.

Regards

#228031 Copied
Viewing 29 results - 1 through 29 (of 29 total)