[Heinz]

Hallo
Im Featured Slider sollte das Bildzentrum festgelegt werden können, da das Bild je nach Bildschirm anders angezeigt wird. zum Beispiel auf meiner Seite, das zweite Bild. http://www.vah.ch. Wenn ich das mit dem Natel Querformat anzeige, sieht dies OK aus. Wenn ich dieses jedoch in Hochformat anzeige, ist das eine Katastrophe. Mit Festlegen des Bildzentrums, würde immer versucht das von mir festgelegt Bildzentrum in das Zentrum zu rücken. Bei meinem Beispiel wäre das Zentrum beim Kopf des rechten Vogels. Ich war vorher auf Koken und Koken kennt das so, ist wirklich eine professionelle Funktion.
Vielen Dank für die Hilfe.
Freundliche Grüsse
Heinz

[Skandha]

@henebe: Hello Heinz,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

#feature-slider-section .hentry {
	background-position: right;
}

Let me know if this works out!
Kind Regards,
Skandha

[Heinz]

Hello Skandha
Thanks for the tip. Yes is a possibility and helps for the picture with the bird. But now it aligns all images to the right. Depending on the picture, I don’t want it that way. Therefore the center point should be able to be determined in every picture. Can I set each image individually with CSS? In Koken, a dot can be marked on the picture with the mouse and this is then noted as the center.
Best regards
Heinz

[Heinz]

Hello
For example, I want to align the first slider image to the left, align the second slider image to the right, and align the third slider image at the bottom. Unfortunately, I cannot program but accept the many commands, assuming that I can address each slider image individually.
Thank you for your help
Heinz

[Skandha]

@henebe: Hello Heinz,
Yes you can manually change it for each image.

Please let me know where you would like each image to be focused on smaller screens.
Kind Regards,
Skandha

[Heinz]

Hello
Here I have 4 examples from my Featured Slider that should be suitable. Which, of course, would be even better if, when aligning, I could not only tell you where it should be aligned, but also give a number indicating how big the margin is. For example:
Horizontal alignment: right margin 20
Vertical alignment: top edge 5

Here are my alignment requests:

Image 1:
Horizontal alignment: centered
Vertical alignment: centered

Picture 2:
Horizontal alignment: right
Vertical alignment: top

Picture 3:
Horizontal alignment: centered
Vertical alignment: below

Pic 7:
Horizontal alignment: right
Vertical alignment: below

Thank you for your help.
With kind regards
Heinz

[Skandha]

@henebe: Hello Heinz,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

#feature-slider-section .images-2.hentry {
    background-position: right top !important;
}

#feature-slider-section .images-3.hentry {
    background-position: bottom center !important;
}

#feature-slider-section .images-7.hentry {
    background-position: bottom right !important;
}

Let me know if this works out!
Kind Regards,
Skandha

[Heinz]

Sorry, it works. I didn’t get a clip. Everything great!!!! Many Thanks 🙂

[Heinz]

Hello Skandha

Many Thanks. It almost works. I can only adjust the positions of one picture. In the second picture, the first line is displayed in red and the command is not executed. I copied your lines 1: 1.

Thank you for your help.
With kind regards
Heinz

[Heinz]

Hello

Now I’ve tested the alignment settings of the slider. It would just be better if an image center could be determined. But you can live with this variant. But what definitely doesn’t work is the alignment in the vertical axis. If the picture is not displayed in full height, I want to be able to determine the orientation. In picture 7, if I don’t see the lower part, this picture is worthless.

Can you help me here.

Many Thanks.
Kind regards
Heinz

[Skandha]

@henebe: Hello Heinz,
What you can do is for the CSS Code I provide you above you can use the background position as
background-position: 50% 50%;

You can change the percentage values for each image depending on how you want the image position to be.

Let me know if this works out!
Kind Regards,
Skandha

[Heinz]

Hello Skandha
Now I have documented all of the errors. You can check it out here: https://vah-test.ch/doku2/. I hope that you can help me now, because my site is a little unprofessional.
Thank you for your help.
With kind regards
Hene

[Heinz]

Hello Skandha
I don’t know if you could watch my films? I realize that not everything is easy to solve under certain circumstances. I have also tested further since then. Some problems can be solved safely with CSS, I wrote down below, if you could let me know about them, I would be very grateful.
Here are my comments on each film again. I have now numbered the chapters.

1 film
It’s not that bad here anymore because I made the headers and baseboards transparent. The problem here is almost entirely in portrait mode. It works properly with the tablet in portrait mode.

2 film
This is not the case with the tablet. The page is always nicely aligned or centered. However, I think this point is important because many people look at the website with their smartphone

The points (navigation points) from the slider can be safely hidden via CSS, if you could give me this CSS.

3 film
It’s not that bad here anymore because I made the headers and baseboards transparent. Now I can always see the slider images correctly.

What is new since I made the footer and header transparent, when I navigate to a page, that the header is displayed in gray above the image. Would be nice, because this area is dark gray and only becomes transparent when the header crosses the image. Example: https://vah.ch/galerien/tiere/

The points (navigation points) from the slider can be safely hidden via CSS, if you could give me this CSS.

4 film
Unfortunately, this error also happens with the tablet. It’s really not that nice, because it is actually common for the device to be rotated between portrait and landscape format images.

5 film
Up to now it can only be fixed on my notebook. But it clicks into place after every page and sometimes doesn’t work straight away on a normal PC. It should be possible to resolve this grid.

6 film
This is not the case on the tablet. The menus are always visible. Now, however, the menu background is transparent because I made the header and footer transparent. If the menu background could be switched to dark gray using CSS, that would be great.

Thank you for your help.
With kind regards
Heinz

[Skandha]

@henebe: Hello Heinz,
I have replied to you here.
https://catchthemes.com/support-forum/topic/pages-scrolling/#post-262521

Kind Regards,
Skandha

[Author]

Posts