Position of text changes depending on display size - Support

Viewing 17 posts - 1 through 17 (of 17 total)

Author

Posts
July 21, 2018 at 10:33 pm #988235
805ITS
Participant
Hello,

I used a 13 inches display to build my website using Enfold. When I use this display to show the website, everything looks great.

My goal is to centered the caption title and text of the full screen slider which worked with the following code :
```
/* Center Text Full Screen Slider Front Page*/
.home .caption_bottom .slideshow_caption .slideshow_inner_caption {
    bottom: 180px !important;
    text-align: center !important;
}
```
but on bigger screen (I am also using a 27 inches display) it appear at the bottom and not in the middle :

http://prntscr.com/k9bz0w

Also on mobile with my iphone SE it appears on the very top instead of being in the middle : https://prnt.sc/k9c0vt

How can I fix this ?

Thank you in advance for your help
July 22, 2018 at 11:36 am #988332
Victoria
Inactive Moderator
Hey 805ITS,

Try wrapping your code in a media query:
```
@media only screen and (min-width:1024px) {
    /* Center Text Full Screen Slider Front Page*/
    .home .caption_bottom .slideshow_caption .slideshow_inner_caption {
        bottom: 180px !important;
        text-align: center !important;
    }
}
```
If you need further assistance please let us know.
Best regards,
Victoria
July 22, 2018 at 10:12 pm #988501

805ITS
Participant

Thank you for your reply but that did not really help. The text is just a little more below on the mobile version but I want it in the middle and it did not change anything on bigger screen on the desktop version of the site.

July 23, 2018 at 7:19 am #988596
805ITS
Participant
I thought I had fix the issue on mobile but I think there is a conflict with my CSS code somewhere. Here was the original code I had for the desktop version of the site :
```
/* Center Text Full Screen Slider Front Page*/
.home .caption_bottom .slideshow_caption .slideshow_inner_caption {
    bottom: 180px !important;
    text-align: center !important;
}

/* Center Text Full Screen Slider Web Design Page*/
.page-id-513 .caption_bottom .slideshow_caption .slideshow_inner_caption {
    bottom: 120px !important;
    text-align: center !important;
}
```
Then I added the code below and it worked but for some reason now the code “break” and all the styling on the header menu disappeared unless I remove the code below :
```
/* Center Text Full Screen Slider Web Design Page on Smartphone*/
@media only screen and (max-width: 480px) {
.page-id-513 .caption_bottom .slideshow_caption .slideshow_inner_caption {
    bottom: 75px !important;
    text-align: center !important;
}

/* Center Text Full Screen Slider Contact Page on Smartphone*/
@media only screen and (max-width: 480px) {
.page-id-35 .caption_bottom .slideshow_caption   .slideshow_inner_caption {
    bottom: 75px !important;
    text-align: center !important;
}

/* Center Text Full Screen Slider Front Page on Smartphone*/
@media only screen and (max-width: 480px) {
.home .caption_bottom .slideshow_caption .slideshow_inner_caption {
    bottom: 75px !important;
    text-align: center !important;
}
```
Also on this page : https://goo.gl/jNZQJy

http://prntscr.com/k9ra2o

I am not sure why it’s doing that… when I remove all the quick css code it goes back to normal..

Any help would be greatly appreciated!
- This reply was modified 6 years, 4 months ago by 805ITS.
July 26, 2018 at 11:48 am #990202
Ismael
Moderator
Hi,

The css media queries were not closed properly. You have to add the closing curly braces.
```
/* Center Text Full Screen Slider Web Design Page on Smartphone*/
@media only screen and (max-width: 480px) {
.page-id-513 .caption_bottom .slideshow_caption .slideshow_inner_caption {
bottom: 75px !important;
text-align: center !important;
}

/* Center Text Full Screen Slider Contact Page on Smartphone*/
.page-id-35 .caption_bottom .slideshow_caption   .slideshow_inner_caption {
bottom: 75px !important;
text-align: center !important;
}

/* Center Text Full Screen Slider Front Page on Smartphone*/
.home .caption_bottom .slideshow_caption .slideshow_inner_caption {
bottom: 75px !important;
text-align: center !important;
}
}
```
// https://www.w3schools.com/css/css_rwd_mediaqueries.asp

You can also combine those css media queries because they’re targeting the same screen width.

Best regards,
Ismael
July 26, 2018 at 7:33 pm #990367

805ITS
Participant

Thank you so much that fixed the problem!! :) Is there an css editor that would tell me if there is any mistake in the code?

July 26, 2018 at 9:44 pm #990463

Victoria
Inactive Moderator

Hi 805ITS,

Glad we could help :)

You can validate the css in a service like this
https://jigsaw.w3.org/css-validator/

If you need further assistance please let us know.
Best regards,
Victoria

July 30, 2018 at 4:23 am #991361

805ITS
Participant

Thank you! I noticed the progress bar does not work on the mobile version : http://prntscr.com/kcjhl1

Any idea what’s wrong?

July 30, 2018 at 5:00 am #991372

Ismael
Moderator

Hi,

Where did you add those elements? I can’t find them anywhere in the site. Please provide a link to the actual page so that we can inspect it.

Best regards,
Ismael

July 30, 2018 at 5:02 am #991373

805ITS
Participant

On this page :

July 31, 2018 at 8:08 am #991813
Ismael
Moderator
Hi,

Thanks for the update.

The title creates another line, so it breaks the layout of the progress bar. Try to decrease the font size on smaller screens.
```
@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .avia-progress-bar {
    position: relative;
    margin-bottom: 25px;
  }

  .avia-progress-bar .progressbar-title-wrap {
    font-size: 11px;
  }
}
```
Best regards,
Ismael
July 31, 2018 at 8:14 am #991819

805ITS
Participant

Thank you I have tried but it did not fix it.

July 31, 2018 at 9:29 am #991848

Ismael
Moderator

Hi,

Did you purge the browser cache and toggle the css/js compression?

Best regards,
Ismael

July 31, 2018 at 9:36 am #991851

805ITS
Participant

Yes I have.. this is what I see : http://i.prntscr.com/_pt3vNFcQBmtbRmvdTkUVw.png

August 1, 2018 at 7:27 am #992201

Ismael
Moderator

Hi,

The code works when I try it on the browser inspector. Did you copy the code from your email? Please provide the login details in the private field.

Best regards,
Ismael

August 1, 2018 at 10:06 pm #992582
805ITS
Participant
It didn’t work but I was able to fix it with this code :
```
/*Fix Progress Bar on "About" page on mobile*/
  .avia-progress-bar .progressbar-title-wrap {
    font-size: 10px;
  }
}
```
August 2, 2018 at 6:12 am #992713

Ismael
Moderator

Hi,

Great! That css code is invalid though. There’s an extra curly brace below. You should remove that.

Best regards,
Ismael
Author

Posts

Viewing 17 posts - 1 through 17 (of 17 total)

You must be logged in to reply to this topic.