Jun 052014
 

Last Updated: January 28, 2016

Suffusion Responsive Settings post shows you how to easily configure the theme for mobile devices like phones and tablets.

Latest News: I have added more information below.

The latest Suffusion version 4.4.9 fixes some issues with the responsive settings. Please refer to the following URL Suffusion 4.4.9 to read more about it.

Important: There is a minor glitch with the responsive menu when you view your website in a mobile device.What is currently happening is the navigation menu displays a link to a page or post “depending on how you have set your navigation menu”. When you click on the navigation menu to display the page it does not refresh and it does not take you to the link already displayed.

There is a workaround for now until this gets fixed in a future release. What you can do is add a Home page link to your navigation menu. That means that when someone views your website on a mobile device, the navigation menu will default to Home link. So, when they click on the navigation menu and view the drop down and select another post or page it will redirect them to what ever they have selected.

Suffusion Theme Options Layouts Tutorials:

Suffusion Responsive Settings Tutorial:

  1. Suffusion Responsive Settings
  2. Suffusion Responsive Settings Advanced

Suffusion Responsive Settings Steps

Step 1 ) Follow the following steps carefully.

  • Set your Layouts to be fluid. Go to Appearance -> Suffusion Options -> Layouts -> Default Sidebar Layout -> Fluid width settings. (This is the most common layout used. You might be using a different layout)
  • Enable Responsive Layouts
  • Add custom code to to implement a nice mobile display
  • In some cases you might have to change the settings for images, widgets, Google Adsense, text etc to % and not PX where ever possible.
  • If you are going to have a logo “Not as text but as an image” then you must upload the image as a “Header Foreground Image” and not as a “Header Background Image”. This will make it responsive. Remember to following the important instructions below.

Important:

If you are going to use an image instead of text for your Blog Title, you need to check the following option to make sure it is not set to hidden. Go to Other Graphical Elements -> Header -> Blog Title / Header Alignment and make sure it is not set to hidden. This controls the display of the Blog Title so if it is hidden then the image will not show. Remember that you are now using an image instead of a text Title.

You also need to add the following custom css code. This is important or else your image will overlap the header width when viewing on small devices.

Adding max-width with a percentage of 100% will force the image to be reduced in size depending on the browser display with different devices. For example desktop monitor, tablet, smartphone etc.

.blogtitle {
max-width: 100%;
}

Step 2 ) Go to Appearance -> Suffusion Options -> Layouts -> Responsive Layouts. See image below.

suffusion-responsive-settings

Step 3 ) The following image allows you to set up the following options.

Enable Responsive Layouts

  • Enable responsive layouts

Breakpoints

  • Check the breakpoints that you want to enable. You have the following options 980px, 650px, 480px, 320px and 240px.

Scaling

  • Don’t allow pinch and zoom on touch devices. Selecting this will fix a bug on mobile Safari. (For all my websites and blogs I enable this option. It allows the theme to work well in Android and iOS devices)

suffusion-responsive-settings-enable

Step 4 ) The following image Switches allows you to set up the following options.

Header Foreground Images (Logos)

  • Resize header foreground images (logos) proportionately (This option is very import to enable, if you don’t then the image will not rezise when viewing in smartphones or tablets. )

Navigation Menu

  • If your browser window is narrower than the following, the navigation menus become “Select” lists. Note that a mega-menu is not displayed in a select list:

Excerpt thumbnails

  • If your browser window is narrower than the following, the thumbnails in excerpts appear above the text:

Pullout-style bylines

  • If your browser window is narrower than the following, the pullout-style bylines appear below the content:

suffusion-responsive-settings-switches

Important Notice: I have left everything as default for each layout. You might want to change these settings in accordance to your design.

Step 5 ) The following image 240px allows you to set up the following options.

  • Show below content (Default)
  • Do not show sidebars(s)

suffusion-responsive-settings-240-screen

Click on the following URL Suffusion Responsive Settings Advanced to complete the next tutorial.

I hope this has helped you with your responsive settings. If you have any questions please let me know.

I will be updating this post from time to time so keep coming back for the latest.

Enjoy

More suffusion tutorials:

Manuel Ballesta RuizManuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

  6 Responses to “Suffusion Responsive Settings”

  1. Dear Manuel, thank you for your instructions! However, I do not succeed in uploading a responsive header. I have success in uploading a background header, but indeed it is not responsive. I loaded a foreground header in the Lay out settings, but no header is shown. In the Customizing area I even cannot upload a header at all, everytime I get an error after clicking on ‘crop’. Have tried everything I can find, but no solution. Hope you can help me.

    • Hi Wim, thank you for your question. Do you have the latest Suffusion version 4.4.8 installed? What WordPress version do you have installed? In the Skinning -> Header section did you also select Use a predefined image or logo for Header Foreground Image Type?

  2. Hello Manuel, I sent my answer, but I don’t see it now, so I’ll send it another time: Suffion 4.4.8, WP 4.4., yes, predefinide image header foreground. When I do so, header stays empty. Via the option Header in Customizer I cannot upload header, shows error.

    • Hi Wim, make sure if you have a cache plugin you clear the cache. You also need to clear the browser cache. Anther area that you need to check is Other Graphical Elements -> Header -> Blog Title / Header Alignment and make sure it is not set to hidden.

  3. Hello Manuel, I don’t understand it. I have no cache plugin, I cleared browser cache, in Other graphical elements Headers is on ‘show’ and still I got no foreground header grrr. Can’t you look for me into the site please?

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)