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 » 16 Mar 2016, 07:27

Hi!

Now I'm back here with a brand new test site, http://emtevik.se. It is set to have fluid width settings and responsive layouts. I think that I have tried everything mentioned in this thread, but still the page is shrinked to the left when viewed in a mobile phone. What am I doing wrong?

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

Re: responsive layout

Post by Colin » 16 Mar 2016, 09:09

You have some code errors which aren't helping see https://validator.w3.org/nu/?doc=http%3 ... evik.se%2F

Your header is not resizing and that is what is causing the problem. How have you created the header?

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

Re: responsive layout

Post by lensv » 17 Mar 2016, 06:36

The header is from the theme (Suffusion), with this layout style:

"Header is outside the main wrapper, its background is as wide as your browser window, but header contents are aligned with the main wrapper"


I've also added the code that drake referred to in the custom includes:

Code: Select all

#header-container, #header-container .col-control, #nav-top, #nav-top .col-control, #nav, #nav .col-control, #wrapper, #page-footer, #page-footer .col-control {min-width:0;}

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

Re: responsive layout

Post by Colin » 17 Mar 2016, 07:51

Try putting the header back inside the main wrapper

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

Re: responsive layout

Post by lensv » 17 Mar 2016, 08:58

OK, that seems to do it. Does this mean that the other layout styles (that Suffusion offers) won't support responsive layouts?

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

Re: responsive layout

Post by Colin » 17 Mar 2016, 12:13

Not necessarily. Everyone's site is different and with so many configuration options the odd one may not give the desired result without some tweaking. Now that we know what is causing your problem we may be able to come up with some CSS or code to give you what you want..

drake
Posts: 6223
Joined: 26 Jul 2011, 07:56
Location: Constanta, Romania
Contact:

Re: responsive layout

Post by drake » 17 Mar 2016, 17:52

@lensv

Your Custom Styles not working and will have problems with any layout you choose.
/* Blog description on the right side of the title */
.description {
float: right;
margin-top: 10px; /* description distance from top of screen */
margin-right: 0px;
margin-left: 10px;
text-transform: capitalize;
font-size: 133%;
font-style: italic;


See? You miss the closing bracket "}" for the first definition and from here everything is broken.

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

Re: responsive layout

Post by lensv » 17 Mar 2016, 23:41

Ahh, thanks ;)

Will I still need this in the Custom Styles...

Code: Select all

#header-container, #header-container .col-control, #nav-top, #nav-top .col-control, #nav, #nav .col-control, #wrapper, #page-footer, #page-footer .col-control {min-width:0;}
..to be able to use Responsive Layouts with the other layout styles in Suffusion?

I'm going away for the weekend now, but I'll be back in a couple of days... Have a nice weekend guys!

drake
Posts: 6223
Joined: 26 Jul 2011, 07:56
Location: Constanta, Romania
Contact:

Re: responsive layout

Post by drake » 18 Mar 2016, 00:41

Probably yes, you need that code, as the site didn't become responsive only by options and the code was blocked by your error. But is just my opinion... why you don't try with and without the code to see what happens?

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

Re: responsive layout

Post by lensv » 21 Mar 2016, 04:48

You are right. The code above seems necessary for the site to be responsive in a correct way with the other header styles.

When using these other styles though the title and especially the description is almost disappearing outside the margins when viewed on a small screen. Is there a way to give them some extra space here?

Locked