Responsive on smartphones?

  • Resolved Brunsnaes

    (@brunsnaes)


    11 years, 3 months ago

    Thank you for an incredible plugin. It has saved me a lot of time of, and the ability to control logged in users’ permissions and access in the post-editor is perfect!

    The plugin works perfectly on the desktop version of my site. Also it scales down and looks very nice on tablets, but when I enter my site from older smartphones or tablets having a low screen resolution, the forms are no longer scaling down but beak out of the website’s frames. It seems like there is a minimum width of the forms defined in pixels instead of a percentage of the screen.

    Is there a way to fix this in order to achieve a higher level of responsiveness for mobile devices?

    https://ww.wp.xz.cn/plugins/frontier-post/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author finnj

    (@finnj)

    11 years, 3 months ago

    I will try and look into it – It seems like it is the editor that causes the problems.

    I did a test, and resizing seems to work from the admin interface, so I believe it has something to do with CSS (which I am not very good at…)

    Thread Starter Brunsnaes

    (@brunsnaes)

    11 years, 3 months ago

    Ok, thanks for the quick reply. Here are 2 screen shots from an old iPhone 3g.

    Picture 1
    Picture 2

    The website I am setting up is for a project in Africa. The most common screen resolution down here is 320X480. (same as the iPhone 3g)
    When I am using tablets with a resolution of 768X1024 all the forms stays within the frame.

    Thread Starter Brunsnaes

    (@brunsnaes)

    11 years, 3 months ago

    I took some time going through the CSS, and I think I got lucky. The editor-form itself is actually set to a min. of 200px which should be fine for pretty much any mobile device, but in the frontier-post.css I found that the title-field was set to 400px causing it to break out of the theme’s frames and making the screen “wider”. After that, the editor form will also follow and obtain the same width as the title form.

    So in order to fix the problem just edit the following piece of code within the frontier-post.css file

    #frontier_post_fieldset_title {
	float: left !important;
	min-width: 400px !important;
}

    Simply change the min-width from 400px to 200px and the entire post-page with all its forms will now be responsive even on very low resolution screens.

    NB: I tried to bring the min. width of both the title and editor form down to 150px, but due to the shape and size of the buttons within the editor it does not look nice. So 200px is the lowest you can go without having to redesign the editor.

    Plugin Author finnj

    (@finnj)

    11 years, 3 months ago

    Thanks,

    You can copy the frontier-post.css to you child theme, and make the changes.
    See this: http://wpfrontier.com/frontier-post-templates-css/

    Plugin Author finnj

    (@finnj)

    11 years, 3 months ago

    I will mark this as resolved, let me know if you disagree

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Responsive on smartphones?’ is closed to new replies.