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/.
Locked
lensv
Posts: 252
Joined: 28 Feb 2011, 04:02

responsive layout

Post by lensv » 19 Jan 2016, 02:26

Hi,

I'm playing around with some ideas to a new web site (http://unikumit.ukit.se). If I activate responive layout in the Suffusion settings the whole page is compressed to the left when viewed in a mobile device. Why is that happening?

One more thing... On the start page I have a table and I can't get rid of the thin gray line (below the iMac image). Can someone help me find out how to hide it?

Best regards,

/LS

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

Re: responsive layout

Post by Colin » 19 Jan 2016, 04:07

For the second you will need to add the below to your custom CSS

Code: Select all

.entry td, .comment-body td {border-bottom: none}
As to the responsive your header is still full sized and not reducing. You will therefore have to sort out your slider to be responsive either in its settings or with some custom CSS.

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

Re: responsive layout

Post by lensv » 19 Jan 2016, 05:22

Thanks Colin! I have no idea how you figure out all these codes? I try to find the correct sections with the developer tool "Inspector" in Firefox, but I always fail ;(

Concerning the responsive layout, the behaviour is still there even if I remove the slider... What am I missing?

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

Re: responsive layout

Post by Colin » 19 Jan 2016, 07:07

It is now the top navigation that is full width.

In your custom CSS you have

Code: Select all

#nav-top, #top-bar-right-spanel {
  max-width: 800px;
  min-width: 800px;
  width: 800px;
}
As a result the top nav is never going to be less than 800px wide. Remove this definition and lets see how you go.

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

Re: responsive layout

Post by lensv » 20 Jan 2016, 05:08

I haven't acutally edited the top bar with CSS. That code must come from the theme itself. I activated the responsive layouts after I configured the top navigation bar though... Could it be a bug in Suffusion?

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

Re: responsive layout

Post by Colin » 20 Jan 2016, 06:57

No you have added it see the attached screenshot showing it to be in custom CSS.
Screen Shot 2016-01-20 at 14.55.23.png
Screen Shot 2016-01-20 at 14.55.23.png (31.77 KiB) Viewed 9592 times

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

Re: responsive layout

Post by drake » 20 Jan 2016, 09:12

Actually the file "custom-styles.css" contain ALL styles, those added at Backend -> Custom Styles, plus ALL styles generated from options of theme.
This is the reason for which I always recommend to use "Auto-generate the CSS and print it in the HTML source (Least load on server, ugly page source code)" at Backend -> Site Optimization.
In this way:
1. you always have active the latest styles, with all latest changes.
2. for me is easier to see where a problem is in your markup as I don't have to look to thousands of CSS lines generated by the theme, but only on changed styles from Custom Includes.

For setting right the responsive layout take a look at: http://www.drafie-design.nl/set-suffusi ... esponsive/ - step 3 is exactly about this and come with a solution.

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

Re: responsive layout

Post by lensv » 20 Jan 2016, 09:21

The only place where I have entered some exceptions is in Custom Includes/Custom Styles and the code for the fixed top-bar is not there :?

*Edit: Sorry drake. I didn't see your post here... I'll have a look at your suggestions tomorrow.

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

Re: responsive layout

Post by lensv » 25 Jan 2016, 08:39

I give up. I think that I'll stick to a fixed layout after all. Too many chages needs to be done to make the site look good with responsive layouts. I also think that the navigation meny offered for lower resolutions is far to tiny (possibly adjustable, I don't know) :?

Another question... When I look at the start page in a computer browser the text is displayed in correct colours, but when viewed in a browser on a mobile device the text in front of the link (in the end of the text) gets the same colour as the link itself. How come?

*Edit: One more thing... For some reason my "snowball image" in header widget (to the right) has got a white background now. It should be transparent. :?:

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

Re: responsive layout

Post by lensv » 26 Jan 2016, 04:09

I don't get it. What can have happened to the transparancy? I just removed the widget in header (by mistake) and then I put it back again, but now it's all white :cry:

Locked