Colour Section width reduced - CSS not working on mobile or tablet devices. - Support

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

Author

Posts
August 18, 2021 at 12:45 pm #1317326

user877
Participant

Hi,

1) I wanted the colour section to not be full screen width and to be slight reduced.

I have followed your website instructions from.. https://kriesi.at/documentation/enfold/color-section/#toggle-id-4 – See section ‘Specific Color Section width’.

Having applied this, this works perfect on laptop screens. If I shrink my browser width to imitate ‘mobile phone size’ this to works fine so I thought all was okay but does not appear to work properly on mobile phone and tablet devices, The current configuration works on larger screens, I have what looks to be equal width on either side on the colour section container. Out of interest I have tried using a ‘column’ container but this only sets width to overall site width (as configured in ‘General Layout’ ‘Dimensions’ currently 80% and I want this first section on the landing page to be wider than the main content width. The Colour element and your CSS code does what I’m looking for but fails to work on mobile phone and tablet devices for some reason.

The CSS code is in theme ‘Quick CSS’ section.

2) Logo is blurred? Uploaded image size is 650 width 350 height. PNG Format. Any thoughts?

Website and login access given in Private content section.
Appreciate any help :)

August 18, 2021 at 11:38 pm #1317385

user877
Participant

sorry gave you incorrect login details. See updated info in private section below .

August 21, 2021 at 3:18 pm #1317738
Mike
Moderator
Hi,
Thank you for your patience and sorry for the late reply, the login didn’t work for me but I did find the cause, at mobile the transform rule is overruled by this css for the parallax effect:
```
.avia_mobile #top .av-parallax-section {
    z-index: 0;
    -webkit-transform: translate3d(0,0,0);
```
So please try replacing your css with this:
```
#main #section-width {
    max-width: 91%;
    left: 50%;
    position: relative;
    transform: translateX(-50%)!important;
}
```
After applying the css, please clear your browser cache and check.
As for your logo image being blurry, I’m not sure that I’m seeing it, but my eyes are not that great, but below I linked to the current 300×159.png and the original 650×344.png try looking at both in your browser if you do see a difference you have two choices, you can download the original and resize it on your desktop manually preserving the image quantity and upload it to the exact location via FTP or your webhost file manager. This is often better than the WordPress image software for smaller images.
Or you can go to the Enfold Theme Options ▸ Logo and enter the URL to the full size image below and save with the Save all changes button, Not the Upload button. This will then show the new image without modifing it.

Best regards,
Mike
August 21, 2021 at 9:56 pm #1317753

user877
Participant

Hello Mike,

That works great.

Thank you.

August 21, 2021 at 10:44 pm #1317756

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

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

The topic ‘Colour Section width reduced – CSS not working on mobile or tablet devices.’ is closed to new replies.