Color section responsive - Support | Kriesi.at

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

Author

Posts
May 10, 2015 at 8:27 pm #442139

Biggy
Participant

Hi,
in our topic from the 26. April #434878 we asked 2 questions. We get an answer for the first question but we could not solve our problem.
And the topic was closed.
So we asked it again. sorry…

we use color sections in the Logo area with background images and text.
It is possible to show the text in smartphones and tablets below the image.
It is possible to have the background images in the color-section responsive?
Thanks for your help!

Regards
Biggy

May 11, 2015 at 10:22 am #442325

Rikard
Keymaster

Hi Biggy!

Could you provide us with a link to the site in question so that we can take a closer look please?

Regards,
Rikard

May 12, 2015 at 9:11 am #442856

Biggy
Participant

Hi Rikard,

for which problem a closer Link?
For the first question or the second?
You can see the second problem in your own demo: http://kriesi.at/themes/enfold/homepage/transparent-header/
In this demo is a fulwidth slider in action. And the images in the slider are not responsive in a smartphone or a tablet.
And the text is always in the image.
And when we use a color section with a background image it is the same!

Regards
Biggy

May 13, 2015 at 4:14 am #443496
Ismael
Moderator
Hi!

The images in the slider is set as background and the background size is set to “cover” in order to keep the image ratio and proportion. It also means that it will scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area: http://www.w3schools.com/cssref/css3_pr_background-size.asp

In order to get most out of a huge image on mobile devices, you can set the background position to center:
```
@media only screen and (max-width: 767px) {
.avia-fullscreen-slider .avia-slideshow>ul>li {
  background-position: 50% 50% !important;
}}
```
Or create another slider with slider images specifically resized to fit on a mobile device. Just add another slider on top or below the default slider then use css media queries to show or a hide a specific element on different screen sizes. Refer to these links for more info:

http://stackoverflow.com/questions/11796297/div-show-hide-media-query

https://kriesi.at/support/topic/how-to-hide-some-elements-in-mobile-version/#post-362263

https://kriesi.at/support/topic/is-there-an-option-to-create-a-separate-page-design-specific-to-mobile-devices/

https://kriesi.at/support/topic/displaying-another-slider-on-mobile-devices/

https://kriesi.at/support/topic/replace-slider-on-mobile/

Regards,
Ismael
May 13, 2015 at 8:52 am #443634

Biggy
Participant

Hi Ismael,

Thanks for your help.
You can close the topic.

Regards
Biggy
Author

Posts

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

The topic ‘Color section responsive’ is closed to new replies.