[Heinz]

Hello Skandha
Did you see the screenshots?
https://vah-test.ch/?page_id=202
Thank you for your help.
Best regards
Heinz

[Heinz]

On my active page (https://vah.ch/galerien/) I solved this as follows. See CSS below.
But this has the following problems:
Fill in the margins with @media screen, just enlarge the page
The publication area is getting wider and the page footer is bigger. In addition, the gaps are not always exactly filled in, depending on the screen and window size, or the margins to the publication area vary greatly in some cases.

Now I have presented my 3 variants. But none of them work properly. I think you can do better, but I can’t find any better information on the web.

/ * Background image on page gallery * /
.page-id-1166 .wrapper {
max-width: 100%;
max-height: 100%;
}

.post-1166 {
background: url (“https://vah.ch/wp-content/uploads/2020/08/VAH08727-kleiner-Ausschnitt-a.jpg”) 50% 50% no-repeat;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: left top;
}

/ * Alignment wallpaper gallery * /

@media screen and (max-width: 500px) {
.post-1166
{
margin-left: -8%;
margin-top: -11%;
margin-right: -8%;
}
}

@media screen and (min-width: 501px) and (max-width: 900px) {
.post-1166
{
margin-left: -6%;
margin-top: -8%;
margin-right: -8%;
}
}

@media screen and (min-width: 901px) and (max-width: 2000px) {
.post-1166
{
margin-left: -5%;
margin-top: -7%;
margin-right: -5%;
}
}

@media screen and (min-width: 2001px) and (max-width: 5000px) {
.post-1166
{
margin-left: -4%;
margin-top: -5.5%;
margin-right: -4%;
}
}

@media screen and (min-width: 5001px)
{
.post-1166
{
margin-left: -4%;
margin-top: -6%;
margin-right: -4%;
}
}

[Heinz]

Hello Skandha
Now I’ve found something else. If I type that like this:

/ * Background image on page gallery test /
.page-id-1166 .wrapper {
background: url (“https://vah.ch/wp-content/uploads/2020/08/VAH08727-kleiner-Ausschnitt-a.jpg”) 50% 50% no-repeat;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: left top;
max-width: 100%;
max-height: 100%;

And leave out @medie screen. Then the background image is displayed up to the edge. However, there is a border at the top of the slider, but the head ridge is also filled with the image. I think I’m close.

[Heinz]

Hello Skandha
Thank you for your help.
The “background-attachment:” is intentionally set to “fixed” because I want the background to remain and the foreground to flow over it. I would also like to achieve that on my smartphone. But the smartphone behaves like it is set to “scroll”.

Thank you for the link to the demo for setting the background image. I know these commands. but there is still a margin at the top and the side with this theme. I then remove it with “@medie screen”. It’s just a little awkward. I believe there is a better variant, but I cannot find it in any documents.

This method then enlarges the page and accordingly the footer list, which is then larger than that of the other side. Of course I want this to be the same size as the other sides.

Thank you for your help.

Best regards
Heinz

[Heinz]

Hello Skandha
Many Thanks. Yes works great. Many Thanks. Now there is the random number generator that arranges the sleider images, which does not work. I’ll try again tonight to see if I can do it, but I don’t think I will. If you have another tip for me here. But now the design of my site is the way I want it to be.
With kind regards
Heinz

[Heinz]

Hello Skandha
Now I can hide the titles in the slider using CSS.
.post .entry-title {
display: none;
}
But the title background bar is still there and I don’t know how to hide it. If you could tell me about the CSS, I would be very grateful.
With kind regards
Heinz

[Heinz]

Hello Skandha
Now I have captured the images for the feature slider in posts. With the slider category, these are then displayed in the slider. I figured out how to align the images:
# feature-slider-section .post-2572.hentry {
background-position: 95% 100%! important;
}
Gene I would like to hide the titles in the page. I didn’t find out. In addition, the images are not displayed using a random generator. The order is always the same, despite the creation of the PHP file.
I would be very happy if you could help me here.
With kind regards
Heinz

[Heinz]

Hello
Here I have recorded the problems with iPhone with this template. The same problems exist with Android as well. I hope there are solutions.
Here is the documentation:
https://vah-test.ch/doku2/

[Heinz]

Hello Skandha
I can save the settings of the theme. But if I have activated the subordinate theme and then want to import the settings, the following message appears:
Error importing settings! Please check that you uploaded a customizer export file.
With kind regards
Heinz

[Heinz]

Hello Hallo Skandha
Fortunately everything is there :-).
But what do I have to do again so that the slider images are displayed in a random order? Or better, what exactly did this change cause? And why does a sub-theme have to be installed here?

[Heinz]

There’s not even a going back. I deactivated the plug-in and now wanted to restore the saved settings from the theme. An error message is issued. A lot of work just gone ……

[Heinz]

Hello Skandha
Now I’ve done that. But all my attitudes have disappeared. It looks like I’m starting again. Did I do something wrong or do I not understand something?
regards
Heinz

[Heinz]

Hello Skandha
Yes, I would like to try.
Kind regards
Heinz

[Heinz]

Hello Skandha
Yes, I don’t see any other solution. I only want to display images and not pages. Why I got the idea to display the slider backwards. The newest pictures are always the last and so I could always display the last pictures first.
I’ve already asked if the images can be displayed randomly. You wrote to me that I had to solve a programming assignment. For me there are 2 options:
I can either set the order I want or the pictures come in a random order. How much effort would this be to implement?
With kind regards
Hene

[Heinz]

Hello
Many Thanks 🙂
Kind regards
Heinz

[Heinz]

Hello Skandha
Yesterday a colleague tested for me on an Android smartphone. The problems are exactly the same as on the iPhone. I already thought about whether it could be related to the screen size of the smartphone. We both have big screens. I have an iPhone 11 Pro Max with iOS 14.01 and my colleague has a OnePlus 8 with Android version 11.
I will still test miner daughter on the Android smartphone.
With kind regards
Heinz

[Heinz]

Hello Skandha
Thank you for your help. It’s much better. Here are my answers to all points.

2. Since I have hidden the navigation points, the error with turning the iPhone has not been here. The images are displayed correctly. However, if I switch from up to across and back up again, the images are no longer switched. It’s not so nice, but I can live with it.

3. Thank you very much

4. Yes, I will test it on my daughter’s cell phone. It doesn’t work with the iPad either. That would be another important point.

5. But I already like it. But with my notebook I can’t get any further than the second page. Next I don’t scroll down or I click on the navigation points.
Is it feasible to turn on normal scrolling? But not the function that can be switched on in the settings, because a scrollbar is also displayed and I don’t want this. But if normal scrolling could be set using a CSS, I would like to try this out.

6. Thank you very much

Thank you for your help. I’m starting to enjoy my side. I already have many pictures that I have published. So I can present my big hobby a little.

With kind regards
Heinz

[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

[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

[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

[Author]

Posts