Responsive design not very responsive (on my contact page)

christopherhauser · 2016-10-13 18:51:12

I have the following problem:

On the contact page ( http://chauser.eu/cp/en/contact/ ) the image and text is cut off on my iphone 6 in portrait mode. I can replicate it with my chrome browser as well...

For example http://chauser.eu/cp/en/about/ scales / response correctly.

Another problem with the iphone is the Vegas slideshow crops images... Is that a normal problem or not?

Ben · 2016-10-13 20:29:27

The width of the image is fixed to 776px, which may be breaking the layout. To verify that that is the cause, can you temporarily remove the image and see whether that makes a difference?

christopherhauser · 2016-10-13 20:42:50

THX a lot!

disabled the image, no change. (The image on about is the same with 776px; there it works)

OK, That was a good hint. The image wasn't the problem, but I forced the "comment" section to width: 500px; / changed it to max-width and it works now.

The only problems remains the Vegas slide show and hint there ?

Last edited by christopherhauser (2016-10-13 20:46:48)

Matthew · 2016-10-13 21:07:00

If you don't want Vegas Slideshow cropping your images, then change Image Scaling from "Cover" to "Fit".

The contact form should be fully responsive by default, unless you implement custom CSS to break it.

christopherhauser · 2016-10-13 21:17:00

Matthew wrote:

If you don't want Vegas Slideshow cropping your images, then change Image Scaling from "Cover" to "Fit".
The contact form should be fully responsive by default, unless you implement custom CSS to break it.

The Problem is not cropping in general only on mobile devices. (Or when simulating it in chrome)

rod barbee · 2016-10-13 21:18:27

your contact page is responsive on my iPhone 6 now. (it wasn't the first time a checked a little while ago)

christopherhauser · 2016-10-13 21:38:46

yes that is fixed, the problem with the vegas slideshow remains. Or at least on my devices...

rod barbee · 2016-10-13 21:52:24

are you referring to the slide show on your home page? It looks fine on my iPhone 6

christopherhauser · 2016-10-13 22:01:14

So no cropped images ? On mine the images on the home slide show are "cropped or better zoomed in"

Matthew · 2016-10-13 22:34:24

The slideshow will scale images to cover the viewport, regardless of size or shape. To wit, it's doing exactly what you've told it to. If you don't want your images cropped, then change the image scaling to "Fit", not "Cover" in your album template.

christopherhauser · 2016-10-13 22:47:26

It IS set to FIT. which by the way produces white borders in the slight show page... (http://chauser.eu/cp/en/galleries/home/)

and yes the images are all exactly 800x400 as they should be.

UPDATE:

Found one problem. copy width was set to 800. Now after setting it to 900 it works. Now the question arise why is the quality so bad?? and why are there white borders...

http://chauser.eu/cp/en/home/ (Top shows JPGs running bottom the vegas slideshow)

Last edited by christopherhauser (2016-10-13 22:51:28)

Matthew · 2016-10-13 23:15:45

Because the full-screen will stretch the images to fill the screen, which is the point. If your images are not large enough, then they will be upscaled. Using "Fit", the image will not be cropped; you will get borders. Using "Cover", the image will cover the screen, but may overflow the screen (hence being cropped). It's one or the other, or just don't use a full-screen presentation at all.

christopherhauser · 2016-10-13 23:19:53

Ok Metthew I get you. However, I'm not talking about Fullscreen at all. I'm talking about my new site (test site) (http://chauser.eu/cp/en/home/)

The image quality with vegas fit is just bad compared to normal JPGs... You can see for yourself.

And WHY is there a border ? The images are set up as 800x400 and SO IS Vegas 800x400...

Last edited by christopherhauser (2016-10-13 23:24:00)

Matthew · 2016-10-13 23:25:48

Because of the black border cutting into your 800x400 dimensions, so that the stage is NOT a perfect fit to your images.

christopherhauser · 2016-10-13 23:39:45

Only the borders or the shadow as well?

Matthew · 2016-10-13 23:47:05

Shadows don't factor into width, so the borders alone should be the cause. Though if your images don't scale perfectly, as can happen during export, you may still find yourself an pixel or two off. Lightroom will often shave a pixel off the width or height of an exported image if your dimensions don't math cleanly.

christopherhauser · 2016-10-13 23:50:51

thx I will look into it tomorrow.

So just to clarify: When I set the width in backlight vegas to 802 and use 1px border the images should have 800px ?

And what should be the aspect ration ? the image is 800x400

Last edited by christopherhauser (2016-10-13 23:53:21)

christopherhauser · 2016-10-14 01:19:58

Next dump question. http://chauser.eu/cp/en/about/

I'm centering images with on for example http://chauser.eu/cp/en/about/

.centerphoto {
text-align: center;
}

Now on http://chauser.eu/cp/en/home/ with my own slideshow the same does not work.

Here is the code:

For the image where it works:
<div class="centerphoto"><img src="/cp/en/photos/about/about_01.jpg" id="copyphoto" width="778"></div>

on the slideshow where it doesn't

I expect this line to the problem:
.fadein img { position:absolute; left:0; top:0; transition:opacity 1s; opacity:1; }

<style>

.fadein { position:relative; }
.fadein img { position:absolute; left:0; top:0; transition:opacity 1s; opacity:1; }
.fadein img.is-hidden { opacity:0; }

</style>

var delay = 5000; // image delay
var ratio = 1/2; // image area aspect ratio

// don't modify below

function set_slideshow() {

var n = document.getElementById("slideshow").offsetWidth;

document.getElementById("slideshow").style.height = n * ratio + "px";

}

window.onload = set_slideshow;
window.onresize = set_slideshow;

// Slideshow from: https://snook.ca/archives/javascript/si … -slideshow

var i=0;

var root = document.querySelector(".fadein");
var els = root.querySelectorAll(":not(:first-child)");
for (i=0; i < els.length; i++) {
els(i).classList.add("is-hidden");
}

root.addEventListener("transitionend", function(){
root.insertBefore(root.querySelector(":first-child.is-hidden"), null);

});

setInterval(function(){
root.querySelector(":first-child").classList.add("is-hidden");
root.querySelector(":nth-child(2)").classList.remove("is-hidden");

}, delay)

</script>

Daniel Leu · 2016-10-14 03:59:12

How about:

#slideshow {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}

from FAQ section on http://danielleu.com/blog/2016/07/addin … sed-pages/.

Anyway, I would recommend using Theater now since it is more powerful and versatile.

rod barbee · 2016-10-14 06:52:25

I'm centering images with on for example http://chauser.eu/cp/en/about/
.centerphoto {
text-align: center;
}

For aligning images on a page or with text, there are already built-in classes for that:
aligncenter
alignleft
alignright

They correspond to WordPress class names. here is what they do:

.alignleft {
	float: left;
  margin: 0.25rem 1.5rem 0.25rem 0;
}

.alignright {
	float: right;
	margin: 0.25rem 0 0.25rem 1.5rem;
}

.aligncenter {
	clear: both;
	display: block;
  margin: 0.25rem auto;
  text-align: center;
}

christopherhauser · 2016-10-14 17:13:48

Thx a lot to you two! Dainel your slideshow is just working as it should!

I will use Daniel's method until I understand why I have to use such strange settings in backlight to get good quality.

Let me explain: My Images for Vegas have 800px by 400px (I checked them again after exporting) I do everything with backlight.

As settings I tried first using

Album Setup
Max Width: 800
Border: 1
Shadows: yes (For reference: What shadows does backlight use ? Which settings?)

Vegas Slideshow
Aspect Ratio Width: 800
Aspect Ratio Height: 400
Image Scaling: Fit

This resulted in bad image quality and a white border... I adjusted it until it looked better. Now I'm puzzeld how these settings work.

Album Setup
Max Width: 800
Border: 1
Shadows: yes

Vegas Slideshow
Aspect Ratio Width: 803 (If I change it to 800x400 / 802x402 / 798x398 or any other setting I get a re sampled low quality image...
Aspect Ratio Height: 404
Image Scaling: Fit

I just want to understand what is actually happening.

christopherhauser · 2016-10-14 17:26:13

rod barbee wrote:

I'm centering images with on for example http://chauser.eu/cp/en/about/
.centerphoto {
text-align: center;
}
For aligning images on a page or with text, there are already built-in classes for that:
aligncenter
alignleft
alignright

Thx a lot! That makes my life easier. Is there any documentation which shows all the "classes" I could use ?

rod barbee · 2016-10-14 22:03:23

Is there any documentation which shows all the "classes" I could use ?

No, not in the docs. I've assembled some in a couple of posts on my ttg-tips site.

http://ttg-tips-and-tricks.barbeephoto. … backlight/
http://ttg-tips-and-tricks.barbeephoto. … s-ttg-ce4/ (CE4 and some Backlight classes)

And there's this from Matt:
http://community.theturninggate.net/vie … hp?id=6325

And you can always look at the style sheet being used by your site. With Backlight, I think all the css files in the download are brought together in one file. You can access it by going to one of your pages and looking at the page source.
Look at around line 37 for the first <link rel="stylesheet" line and click on the href link. It should look like this:
href="http://yoursite.com.com//index.php?template=6&extension=css&name=style&ppf=on" .
This will take you to the main stylesheet.
I've copied it all and pasted it into a code editor and saved it as a .css file (any plain text editor will do, but a code editor has syntax highlighting, making it easier to read.)

You can then look through the file to see all the css the site is using.

From what I've seen, you've got the .alignxxx classes, the responsive .grid and.push and .pull and .row classes (starting at around line 1046 under "Other"), and the .haiku class.

Community @ The Turning Gate

#1 2016-10-13 18:51:12

Responsive design not very responsive (on my contact page)

#2 2016-10-13 20:29:27

Re: Responsive design not very responsive (on my contact page)

#3 2016-10-13 20:42:50

Re: Responsive design not very responsive (on my contact page)

#4 2016-10-13 21:07:00

Re: Responsive design not very responsive (on my contact page)

#5 2016-10-13 21:17:00

Re: Responsive design not very responsive (on my contact page)

#6 2016-10-13 21:18:27

Re: Responsive design not very responsive (on my contact page)

#7 2016-10-13 21:38:46

Re: Responsive design not very responsive (on my contact page)

#8 2016-10-13 21:52:24

Re: Responsive design not very responsive (on my contact page)

#9 2016-10-13 22:01:14

Re: Responsive design not very responsive (on my contact page)

#10 2016-10-13 22:34:24

Re: Responsive design not very responsive (on my contact page)

#11 2016-10-13 22:47:26

Re: Responsive design not very responsive (on my contact page)

#12 2016-10-13 23:15:45

Re: Responsive design not very responsive (on my contact page)

#13 2016-10-13 23:19:53

Re: Responsive design not very responsive (on my contact page)

#14 2016-10-13 23:25:48

Re: Responsive design not very responsive (on my contact page)

#15 2016-10-13 23:39:45

Re: Responsive design not very responsive (on my contact page)

#16 2016-10-13 23:47:05

Re: Responsive design not very responsive (on my contact page)

#17 2016-10-13 23:50:51

Re: Responsive design not very responsive (on my contact page)

#18 2016-10-14 01:19:58

Re: Responsive design not very responsive (on my contact page)

#19 2016-10-14 03:59:12

Re: Responsive design not very responsive (on my contact page)

#20 2016-10-14 06:52:25

Re: Responsive design not very responsive (on my contact page)

#21 2016-10-14 17:13:48

Re: Responsive design not very responsive (on my contact page)

#22 2016-10-14 17:26:13

Re: Responsive design not very responsive (on my contact page)

#23 2016-10-14 22:03:23

Re: Responsive design not very responsive (on my contact page)

Board footer