Need help? Check out our Support site, then


Blog name in Isola

  1. harshilshah1910
    Member

    The Isola theme that went live a couple days back looks really neat to me, and I really want to switch my blog (linked) to it, especially because of that beautiful typography. However, the theme renders the blog title weirdly on mobile devices, splitting my two-worded blog name "Harshil Shah" into two lines despite there being enough space to fit the rest, and this really just does not look good at all. Not just that, it doesn't even indent the second line to match up with the first, so it looks like this:

    [Menu label] Harshil
    Shah

    This obviously looks like its a bug and not an intended result, so I'd like it if this could be corrected, and soon at that.

    The blog I need help with is harshilshah1910.wordpress.com.

  2. See here http://theme.wordpress.com/themes/features/responsive-layout/ to determine whether or not Isola is a responsive layout theme.

    Know that responsive width means the layout adapts depending on the size of the device being used to view your site. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.

    The mobile theme is a completely different theme.

    When using responsive width themes we go to > Appearance > Mobile and disable the mobile theme.

  3. Hi Harshil, I just wanted to add a bit to timethief's helpful answer.

    It looks like that title area was left intentionally small on mobile screen sizes in order to allow space for the search box to expand.

    Assuming you have the Custom Design add on, this layout snag can be corrected very easily with just a couple of lines of CSS.

    Here's an example -

    /* Use a media query to only execute this change when the browser is 400px or smaller, where the problem occurs. */
    
    @media only screen and (max-width: 400px)  {
    
    	/* Then, increase the size of the site branding from 50%, to 60%, to fit your title. */
    
    	.site-branding {
    		width: 60%;
    	}
    }

    This bit of CSS, when added to the customizer, would allow your title to fit with room for the search bar to expand.

    Here's a screen shot of the result, using the iPhone 4 emulator in Chrome developer tools - http://postimg.org/image/stw3w7ytr/

    Another option -

    /* Use a media query to only execute this change when the browser is 400px or smaller, where the problem occurs. */
    @media only screen and (max-width: 400px)  {
    
    	/* Then, clear the site title, so that it moves below the menu. */
    
    	.site-title {
    		clear: left;
    	}
    }

    This would move your site title below the menu icon by "clearing" it on the smaller view. It would look like this - http://postimg.org/image/7d387u13j/

    I hope that helps you a bit. All the best!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags