Suffusion Theme Responsive Settings

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

Last Updated: January 1, 2024

Latest News: I updated the documentation below.

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.

What You Need:

• Suffusion

Suffusion Responsive Settings Tutorial:

1. Responsive Settings
2. Advanced Responsive Settings

Suffusion Theme Responsive Settings

Step 1 ) The following is a list of steps that help you set up your site for mobile devices “Responsive”.

• 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. Go to Appearance -> Suffusion Options -> Layouts -> Responsive Layouts. See step 3 ) below for more information.
• In some cases you might need to add custom code to help adjust and implement a nicer mobile display.
• You might have to change the settings for images, widgets, Google Adsense, text etc to % instead of 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 note 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 as illustrated in the image below to set up your 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)

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:

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)

Recommended Link:

• Click on the following URL Layouts Tutorials for more layouts tutorials.

========================

I hope this has helped you with your responsive settings.

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

If you have any questions please let me know. I will be updating this from time to time. So keep coming back for the latest.

Enjoy.

More Suffusion Tutorials:

• Suffusion Theme Tutorials