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, 3 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
1 2

Viewing 20 results - 1 through 20 (of 29 total)