[lilialaminae]

Thank you, Kyle! Worked like a charm.

[lilialaminae]

Alright. What I did now is take your code and adapt it to three screen sizes:

.page-heading.fancy-heading {
  background-position: right center !important;
}

@media only screen and (max-width: 767px) { 
.page-heading.fancy-heading {
  background-position: top center !important;
  height: auto !important;
}
}

@media only screen and (max-width: 479px) { 
.page-heading.fancy-heading {
  background-position: left center !important;
  height: auto !important;
}
}

It now looks okay on mobile portrait and laptop screens. The landscape view on my phone still isn’t ideal, neither is it on a tablet, but I’m gonna have to live with this now. I guess this just means that I can’t use pictures like this on this heading.

Thank you very much for your support, once again! I have learned a lot.

[lilialaminae]

Okay, let’s try that!

[lilialaminae]

See the screenshots.

Attachments:

You must be logged in to view attached files.

[lilialaminae]

Thank you. I tried it and now it looks like the screenshot. 🙂

Attachments:

You must be logged in to view attached files.

[lilialaminae]

Well, I just want the thing to behave like the RevSlider. Always display the whole image but shrink/grow it proportionally in width and height. Yes, I could use a RevSlider instead, but I like the general style of the fancy heading and that the headlines are already formatted as h1 and h2. If it’s not possible, never mind. I will have to go through the effort and not use your acutally very useful feature but do everything with sliders.

[lilialaminae]

Hello Kyle,

thank you for explaining. And it isn’t possible to change the height into a maximum height, so the background can dynamically grow and shrink with the width of the screen? I tried to figure it out myself, without success…

[lilialaminae]

I want the images displayed in their original state instead of being zoomed in and cut out. The writing can stay big, but it really looks nicer if everything is proportional to each other. The same thing happens in the Swift Sliders, as well. Why can’t the images be displayed in full size and resize according to the screen type? And, just out of curiosity, why is the RevSlider not ideal?

Thank you for your time. Can I donate somewhere?

[lilialaminae]

Thank you Kyle, and thank you Mohammad!

The code is gone. Happy coding!

[lilialaminae]

Hi Mohammad,

I’m sorry, but the images are now stretched on my desktop, as well. Am I missing some basic knowledge about responsiveness? I see the Revolution Slider on the front page which uses a 1920×700 picture and a 700px slider height (so basically the same settings, right?) and it looks great in every size. Why do my images on the fancy headings, which have 1920x400px have to be zoomed or look stretched if not viewed on a big screen?

I’m sorry if I am a pain, I just want to understand so I won’t have to ask in the future.

[lilialaminae]

No, it looks like the Image is stretched. And the big screen issue where the edges of my Image are cut instead of being displayed in full width is still present.

[lilialaminae]

Hello Mohammad,

thank you for the code. Unfortunately, it didn’t solve the problem. See screenshots attached (mobile looks wild now!).

The problem appears also when the screen size is wider than 767px. My browser window in my laptop currently shows me the fancy heading with 1350px width and 400px height.

EDIT:

I experimented a bit with your code. If i comment the media only screen bit out, it also changes on my laptop. If I comment the height out, the image gets unproportional. If I only use 100% at background-size once, the image is proportional, but now not 400px high anymore. I attached another screenshot with my editings.

I hope you can follow me!

Attachments:

You must be logged in to view attached files.

[lilialaminae]

This reply has been marked as private.

[lilialaminae]

Thank you, Nishant!

[lilialaminae]

I have the same issue. I upload pictures with 1920×400 (the set height for my fancy headings) but it keeps zooming. I am viewing on a 13.3 inch screen, but the same thing happens on bigger screens with better resolution.

I set the page width to 1920, if that helps anything.

URL: http://www.rechtsanwaeltin-haar.de/wordpress