Full-width text scroller below logo and menu - Support | Kriesi.at

Viewing 30 posts - 1 through 30 (of 33 total)

1 2 →

Author

Posts
March 24, 2021 at 6:04 pm #1290191

Rachel
Participant

Hey guys :)

So I used the enfold doc article – https://kriesi.at/documentation/enfold/example-of-full-width-text-scroller-below-logo-and-menu/

I’m not using the suggested plugin for the scroller itself, at the moment I’m using ‏plain text with the text widget.

3 questions/ problems:
1. How can I change the background color for the widget area?
2. On decktop the header has a lot of dead space and the widget area covers the page’s body?
3. on mobile, the header has a lot of dead space and is really really big.

Since the website is working and buyers are using it, until I could pix those problems, the “header” widget area is empty.
However, I’ve added pics and links

thanks!

March 29, 2021 at 4:48 am #1291006

Rikard
Keymaster

Hey MPPcreative,

I can’t find the widget area in the source of your site, could you send us WordPress login details in private, so that we can try to add some content to it please? Also, what exactly are you looking to adjust on mobile screens?

Best regards,
Rikard

March 29, 2021 at 10:48 am #1291058

Rachel
Participant

Hey Rikard,
Thank you.
I’ve added the login details.
On mobile, the header has a lot of dead space and is really really big, I would like to reduce all of the dead empty space.

thanks again
Rachel

April 1, 2021 at 5:57 am #1291677
Rikard
Keymaster
Hi,

Thanks for that. This CSS in your child theme is adding the background colour, please change it there:
```
@media (min-width: 986px) {
.responsive #top #header #header_main .inner-container .widget>div {
    width: 100%;
    line-height: 14px;
    background: gold;
    text-align: center;
    padding: 10px;
}
}
```
I’m still not sure I understand what you want to change on mobile though. I see that there is space there, but I don’t know what you want to move and to where? Please try to be as specific as possible, or post a screenshot highlighting what you would like to achieve.

Best regards,
Rikard
April 3, 2021 at 2:59 am #1292035

Rachel
Participant

Hey Rikard.
thanks for that.

a few things:
On mobile:
1. The announcement row isn’t showing.
2. There is a huge padding/ margin (couldn’t find what or where it is to delete it by myself) and I would like to delete it.
3. There is a huge padding/ margin before and after the menu itself.

On desktop:
1. The announcement row is covering the body area, about 20px.
2. On smaller screens, the text is covering itself and it’s unable to read.

April 6, 2021 at 5:14 am #1292666
Rikard
Keymaster
Hi,

Thanks for the video and screenshot. I couldn’t see the large spaces on my end, in which browser and device are you seeing that on? Also, did you try to load the page in an incognito or private browser window?

You can try this in Quick CSS, to reduce the space between the header and first section on mobile:
```
@media only screen and (max-width: 767px) {
.home .container_wrap_first main {
    padding-top: 0;
    padding-bottom: 0;
}

.home .container_wrap_first main hr-invisible {
    height: 0;
}
}
```
Best regards,
Rikard
April 14, 2021 at 9:30 pm #1294435

Rachel
Participant

Hey Ricard.

Thank you.
but it didn’t work.

Yes, I did you try to load the page in an incognito browser window the result is the same.
I’m using Chrom, Firefox, Mozilla, Safari.
and I’m using iPhone 7+ (ios 14.2), Samsung note 4, and Xiaomi.

I still have 5 problems with the code and hader.

On mobile:
1. The announcement row isn’t showing.
2. There is a huge padding/ margin (couldn’t find what or where it is to delete it by myself) and I would like to delete it.
3. There is a huge padding/ margin before and after the menu itself.

On desktop:
1. The announcement row is covering the body area, about 20px.
2. On smaller screens, the text is covering itself and it’s unable to read.

I kept removing the text row because the site is alive and running.
But I’m keeping it, so you guys would be able to see all those crucial problems.

April 15, 2021 at 11:01 am #1294539

YemeshM
Participant

I sent through a support ticket before this guy but he is responded to and I am still waiting. I was promised support with my $62 purchase of enfold

April 17, 2021 at 5:12 am #1294863

Rikard
Keymaster

Hi YemeshM,

All your topics have been replied to: https://kriesi.at/support/profile/yemeshm/topics/

Best regards,
Rikard

April 19, 2021 at 6:51 pm #1295329

Rachel
Participant

Hey,
just making sure I won’t be forgotten, so um copping my last reply –

Hey Ricard.

Thank you.
but it didn’t work.

Yes, I did you try to load the page in an incognito browser window the result is the same.
I’m using Chrom, Firefox, Mozilla, Safari.
and I’m using iPhone 7+ (ios 14.2), Samsung note 4, and Xiaomi.

I still have 5 problems with the code and hader.

On mobile:
1. The announcement row isn’t showing.
2. There is a huge padding/ margin (couldn’t find what or where it is to delete it by myself) and I would like to delete it.
3. There is a huge padding/ margin before and after the menu itself.

On desktop:
1. The announcement row is covering the body area, about 20px.
2. On smaller screens, the text is covering itself and it’s unable to read.

I kept removing the text row because the site is alive and running.
But I’m keeping it, so you guys would be able to see all those crucial problems.

April 22, 2021 at 4:41 am #1295909
Rikard
Keymaster
Hi,

Thanks for the update. Please try this CSS as well:
```
@media only screen and (max-width: 767px) {
.responsive #header_main .container {
    height: 90px !important;
}
#text-8 p span {
  color: green !important;
}
}
```
Best regards,
Rikard
April 22, 2021 at 1:07 pm #1296041

Rachel
Participant

Hey Rikard,

Thank you for your help, but sadly, this code didn’t work.
All 5 problems are still not fixed.

April 25, 2021 at 5:04 am #1296564

Rikard
Keymaster

Hi,

Please see screenshot in private for what I see on my end, what exactly are you looking to change in that layout?

Best regards,
Rikard

April 25, 2021 at 4:19 pm #1296615

Rachel
Participant

Hey Rikard,

thanks for that. for some reason, I’ve only seen it now on my devices.
I would like for the BG at the text part under the menu and header to be black, the text itself to be pink and bold, and with a little space between the lines (like it is now on large screens).

I’ve tryed this code, but I it’s not working.

@media only screen and (max-width: 986px) {
.responsive #top #header #header_main .inner-container .widget>div {
width: 100%;
line-height: 0px;
background: #000000;
text-align: center;
font-weight: bold;
text: center;
padding: 0px;
}
}

also, on both big and small screens the text line is still overlapping the body.
I have added pics for this problem.

thanks again

April 28, 2021 at 5:40 am #1297099

Rikard
Keymaster

Hi,

Thanks for the update. I’ve adjusted the code for you a bit, please review your site.

Best regards,
Rikard

April 28, 2021 at 12:14 pm #1297148

Rachel
Participant

Hey!

Thanks for that

2 things if I can.
1. The container is still overlapping the text on all screens.
2. Is it possible on the mobile screen that the container will be close as possible to the header and the edges?
3. The font color on the mobile screen is still white.

I’ve added the margin but nothing changed.

margin-bottom: 35px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;

Again thanks for all your help!

May 2, 2021 at 4:22 am #1297758
Rikard
Keymaster
Hi Rachel,

Sorry for the late reply. Please try this CSS as well, in order to adjust the widget for tablet screens:
```
@media only screen and (min-width: 768px) and (max-width: 1024px) {
#text-8 {
    top: 90px !important;
}
}
```
It’s difficult to get the widget full width on smaller screens unfortunately, but you can try this CSS in order to give the container element a background instead:
```
@media only screen and (max-width: 1024px) {
.container_wrap_first {
    background-color: #000;
}
}
```
The text is pink on mobile on my end, please try loading the site in an incognito or private browser window.

If you don’t want to use the widget on tablet/mobile, then it’s likely better if you add the content in the widget to its own section for those screens. You can hide the section for desktop on the element options, and we can give you CSS to hide the widget as well, if you would like to go with that option.

Best regards,
Rikard
May 3, 2021 at 1:20 pm #1297992
Rachel
Participant
Hey,
thanks for all your help.
I don’t what to hide the widget or the element at all.

still dealing with does problems –
1. The container is still overlapping the text on all screen sizes.
2. Is it possible on the mobile screen that the container will be close as possible to the header and the edges?

thank you :)
- This reply was modified 3 years, 7 months ago by Rachel.
May 4, 2021 at 1:59 pm #1298275

Rikard
Keymaster

Hi,

I’ve modified the CSS a bit, and it looks good on mobile, and most tablet sizes now. There’s something happening to the header between approximately 1035 and 990 pixels though, but I’m not sure exactly what. It looks like there’s some code in your style.css file, which might be causing that. Would it be ok if we try to comment out the code which we think is responsible?

Best regards,
Rikard

May 5, 2021 at 6:47 am #1298437

Rachel
Participant

Hey!

Sure! thank you so much for all the help, really appreciate it.

May 8, 2021 at 5:03 am #1299053

Rikard
Keymaster

Hi,

Thanks for the update. We’ll keep this thread open for you, in case you should need any further help on the topic.

Best regards,
Rikard

July 6, 2021 at 12:02 pm #1308921

Rachel
Participant

Hey Rikard,

I still have 2 problems.

1. On the desktop and on Mobile, the heder is overlapping the body. especially on product-type pages (on all pages but it is visibly the most on products)
2. On Mobile, the body background is all black instead of white.

How can I fix them?
it’s really terrible.

thanks!

July 7, 2021 at 5:47 am #1309017

Rikard
Keymaster

Hi Rachel,

Thanks for the update. I’m not sure I fully understand exactly what you would like to change, could you post screenshots highlighting your intentions please? Also please link directly to an example page, where we can reproduce the problem.

Best regards,
Rikard

July 7, 2021 at 12:38 pm #1309091

Rachel
Participant

Hi Rikard,

Thanks for the answer.

I’ve added links and pix.
I’ve wroth down the problem number next to the pix.
1. for the first problem, I’ve added pix (and links) for examples of – product category link page, product type page, regular pages, and also a video so you can see that while the pages are loading the heder is getting bigger by about 50px and not only eliminating the white space between the header content and the body content it’s actually overlapping the content itself.
yesterday, I saw it both on mobile and desktop. but today it’s only on desktop.
2. On Mobile, the body background is all black instead of white, on all pages except for the product type page. I’ve added a video of the site on iPhone, but it’s also on Android.

Thanks again
Rachel

July 8, 2021 at 7:11 am #1309197
Rikard
Keymaster
Hi Rachel,

Thanks for the screenshots and video, it’s very helpful. Please try this CSS as well:

1.
```
.template-shop.content {
    padding-top: 70px;
}

.single-product #main, .page-template-default #main, .woocommerce-cart #main {
    padding-top: 215px;
}
```
2.
```
@media only screen and (max-width: 767px) {
.container_wrap {
    background-color: #fff !important;
}
}
```
Best regards,
Rikard
July 8, 2021 at 3:27 pm #1309269

Rachel
Participant

Hey Rikard!

thank you so much for the quick reply.

1. Only worked on product category link page.
the problem is still happening on product type pages, post type pages, portfolio type pages, and of cors regular pages (all of them).

2. It works. the BG is white. but, the header and footer are also white and need to be – #fceeea.

What can I do to fix it?

Thanks again for all your help

July 10, 2021 at 5:53 am #1309471
Rikard
Keymaster
Hi,

1. Please try this instead:
```
.template-shop.content {
    padding-top: 70px;
}

.single-product #main, .page-template-default #main, .woocommerce-cart #main {
    padding-top: 215px !important;
}
```
2. And this instead of the previous code as well:
```
@media only screen and (max-width: 767px) {
#main .container_wrap {
    background-color: #fff;
}
#footer {
    background-color: #fceeea;
}
}
```
Best regards,
Rikard
July 11, 2021 at 1:23 pm #1309574

Rachel
Participant

Hey!
Thank you so much!

1. Is working great!
However
Now,The header is overlapping the body content, didn’t do that before…

2.Sometimes, the footer isn’t showing 1 column after the other, but all 4 columns side by side like on desktop, and sometimes the footer is fine but with whitebackground.

I’ve added pix so you can see.

Thanks again for all the help

July 12, 2021 at 4:47 am #1309659
Rikard
Keymaster
Hi,

Thanks for the update.

1. I’m not sure I can see any overlapping on the page in private, and I can’t see that happening in any of your screenshots either?

2. Please try this CSS as well:
```
@media only screen and (max-width: 767px) {
#footer .av_one_fourth {
    margin-left: 0 !important;
    width: 100% !important;
}
}
```
Best regards,
Rikard
- This reply was modified 3 years, 5 months ago by Rikard.
July 12, 2021 at 11:47 am #1309737

Rachel
Participant

Hey!
Thanks for that.

1. Sorry, I forgot to write that now it’s happening only on Mobile.
I’ve added a new pic of the “my account” page (it is happening on all page types).

2. doesn’t work.
The footer and socket are still Sometimes showing all 4 columns side by side like on desktop, and sometimes are is fine but with white background.

I also add a video of the site on iPhone
Author

Posts

Viewing 30 posts - 1 through 30 (of 33 total)

1 2 →

You must be logged in to reply to this topic.