responsive layout

General questions on how to do things using Photonic.

This forum is not actively monitored. For support topics please post them to https://wordpress.org/support/plugin/photonic/.
lensv
Posts: 252
Joined: 28 Feb 2011, 04:02

Re: responsive layout

Post by lensv » 22 Mar 2016, 08:38

Hello again!
Now I have made a new try to give the original site (http://unikumit.ukit.se) responsive layouts. The first problems are resolved now, but the header and the graphics below it looks like sh*t. What else would I need to change?

Colin
Posts: 5066
Joined: 27 Oct 2009, 10:46

Re: responsive layout

Post by Colin » 22 Mar 2016, 12:13

There is some major work to do to get your site working due to some of your custom code and some of your current design.

IMHO this is getting beyond the scope of a support forum and falls into the space of a professional web developer.

For example your Uni Kum IT image in the header has a red background and this is overlaying your white dots. One solution to this is turn it into a png image with a transparent background so that the white dots can show through. You have the #header width and max-width set to 100% remove this definition and then Uni Kum IT will no longer extend to the right outside the header.

Another example is that your .tui-animation is set at fixed widths and so cannot be responsive and so disappears to the right.

And so it goes on.

lensv
Posts: 252
Joined: 28 Feb 2011, 04:02

Re: responsive layout

Post by lensv » 23 Mar 2016, 03:21

I was thinking that these issues would be resolved by just setting the minimum width to something like 600, but that setting don't seem to apply at all :?:

Colin
Posts: 5066
Joined: 27 Oct 2009, 10:46

Re: responsive layout

Post by Colin » 23 Mar 2016, 04:54

Try 300 or 360 as phone have much small screen widths. I usually use media queries in my CSS and set the first one at 0 to 399px and then step up in appropriate increments from there until I get to 1199px as I usually set my sites to fluid 1200px wide.

lensv
Posts: 252
Joined: 28 Feb 2011, 04:02

Re: responsive layout

Post by lensv » 23 Mar 2016, 06:59

So, what is this Minimum setting for then (under Fluid Width Settings)? The maximum value seems to apply though...

lensv
Posts: 252
Joined: 28 Feb 2011, 04:02

Re: responsive layout

Post by lensv » 28 Mar 2016, 23:16

I'm trying to get a grip of these fluid settings. What's the idea with the minimum width setting? It don't seem to have any effect, not even with the responsive layouts turned off. :roll:

Colin
Posts: 5066
Joined: 27 Oct 2009, 10:46

Re: responsive layout

Post by Colin » 28 Mar 2016, 23:59

Take a look at a site I did recently http://outlander-bikers.com. The header image is set as the background. This is the custom CSS that I used, as you can see regardless of the screen size it adjusts appropriately.

Code: Select all

#header-container.custom-header {background-size: contain;  background-repeat: no-repeat;}
@media all and (max-width: 399px) and (min-width: 200px) {
  #header {min-height:19px; } }
@media all and (max-width: 499px) and (min-width: 400px) {
  #header {min-height:45px;  } }
@media all and (max-width: 700px) and (min-width: 500px) {
  #header {min-height:65px;  } }
@media all and (max-width: 850px) and (min-width: 701px) {
  #header {min-height:99px;  } }
@media all and (max-width: 1050px) and (min-width: 851px) {
  #header {min-height:139px;  } }
You will need to do something similar for your images & sliders.

These are my settings in the default template layout.
Screen Shot 2016-03-29 at 08.56.57.png
Screen Shot 2016-03-29 at 08.56.57.png (252.54 KiB) Viewed 5968 times
and these are my settings in Responsive Layouts
Screen Shot 2016-03-29 at 08.58.27.png
Screen Shot 2016-03-29 at 08.58.27.png (91.73 KiB) Viewed 5968 times

lensv
Posts: 252
Joined: 28 Feb 2011, 04:02

Re: responsive layout

Post by lensv » 29 Mar 2016, 01:18

Hi Colin!

I can see thay you have similar settings as I do (Fluid width with a minimum value of 600). This setting don't seem to apply on your site either. I understand that lots of tweaking may be done by custom CSS, but the question here is what the minimum width setting is supposed to do in the Suffusion theme?

lensv
Posts: 252
Joined: 28 Feb 2011, 04:02

Re: responsive layout

Post by lensv » 30 Mar 2016, 03:53

Would it be appropriate to file a bug report for this issue or is there a "natural" explaination for why the minimum width setting won't apply?

Colin
Posts: 5066
Joined: 27 Oct 2009, 10:46

Re: responsive layout

Post by Colin » 30 Mar 2016, 04:21

What do you want the 600px to do? I really don't understand your issue.

Locked