Viewing website on mobile phone – Ilustratr

  • Unknown's avatar
    aworkinghand · Member ·

    Hello

    I am looking for help with my website when viewed on a mobile phone.
    At the moment the posts are fine but the title doesn’t reformat?

    wordpress live chat have suggested someone on here could help.

    Thanks!

    R

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    aworkinghand · Member ·

    They have suggested I copy and past my code here:

    /* Body font */
    #page * {
    font-family: oriya MN;
    text-transform: none;
    font-weight: normal;
    }

    /* Lowercase page titles */
    .entry-header {
    text-transform: lowercase !important;
    }

    .site-branding {
    width: px;
    }

    .main-navigation {
    max-width: 780px;
    margin: 0 auto;
    }

    .main-navigation ul {
    text-align: middle;
    }

    .home .main-navigation {
    max-width: 840px;
    margin: 0 auto;
    }

    .home .site-branding {
    width: 840px;
    }

    .site-title {
    font-size: 50%;
    }

    .entry-title {
    font-size: 16px;
    margin: 40px auto 0;
    }

    .page-header {
    padding-bottom: 1px;
    width: 800px;
    }

    .page-template-portfolio-page .page-content {
    margin-top: 0;
    }

    .page-template-default .entry-header {
    margin-bottom: 20px;
    }

    .portfolio-entry .size-full.image-big {
    max-width: 800px;
    margin: 0 auto;
    }

    .home .entry-content {
    width: 840px;
    }

    .entry-content p {
    font-size: 14px;
    color: #000;
    }

    .gallery {
    margin-left: -20px;
    }

    .entry-content .slideshow-window {
    background-color: #fff;
    border: none;
    }

    .entry-content .slideshow-controls {
    display: none;
    }

    @media screen and (min-width:800
    px) {
    .entry-content .slideshow-window {
    width: 150%;
    margin-left: -25%;
    height: 601px;
    padding: 10px !important;
    }
    }

    .page-header+.hentry:before, .hentry+.hentry:before {
    display: none;
    }

    .page-header+.hentry {
    margin-top: 0;
    padding-top: 0;
    }

    /*
    body.category-makers article .entry-header:before {
    content: “AWH visits makers in their environments. We ask them about their processes, materials and tools”;
    display: block;
    text-align: center;
    } */
    /* Remove category page titles */
    .page-title {
    display: none;
    }

    /*Remove horizontal lines on page header */
    .page-header:after, .entry-header:after {
    background: none;
    }

    div.taxonomy-description {
    color: #000;
    }

    .site-title {
    margin-bottom: 5px;
    }

    .site-description {
    margin-bottom: 40px;
    }

    .single .entry-thumbnail {
    display: none;
    }

    .entry-title {
    /* hide post details on home page */
    }

    .page-header+.hentry {
    margin-top: 0;
    padding-top: 40px;
    }

    .portfolio-entry-header h1 {
    font-size: 1em;
    }

    .entry-meta:before {
    display: none;
    }

    .site-header {
    padding-bottom: 1px;
    }

    .entry-title {
    margin-top: 0;
    }

    .portfolio-thumbnail {
    margin-bottom: 0;
    }

    .portfolio-entry-meta {
    padding-top: 10px;
    }

    .site-title a {
    letter-spacing: 15px;
    }

    .widgets-wrapper {
    display: block !important;
    }

    .widgets-area .widget {
    opacity: 1 !important;
    }

    .widgets-area {
    background-color: white;
    }

    .widgets-wrapper {
    background: white;
    }

    .widgets-trigger {
    display: none;
    }

    #secondary:after {
    display: none;
    }

    .entry-content p {
    text-align: justify;
    }

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, this bit of custom CSS is what is causing the issue. 

    .home .site-branding {
    width: 840px;
}

    You want to change that to max-width.

  • Unknown's avatar
    thesacredpath · Member ·

    Also, looking through your CSS, you need to modify the following CSS rules to look like what I have below. 

    .page-header {
	padding-bottom:1px;
	max-width:800px;
        width: 100%;
}
.home .entry-content {
	max-width:840px;
	width: 100%;
}
  • Unknown's avatar
    aworkinghand · Member ·

    Thank you – this is great.

    The menu titles – keepers, makers, about, contact – don’t seem to show in the mobile app though?

    Any ideas?

    Thanks

    R

  • Unknown's avatar
    thesacredpath · Member ·

    You have this rule in your custom CSS 

    #page * {
    font-family: oriya MN;
    text-transform: none;
    font-weight: 400;
}

    With the *, it changes the font of absolutely everything to the font family you listed, even the icon font that is for the menu icon.

    Add the following to reverse that font change for the menu icon. 

    .genericon-menu::before {
	font-family: genericons;
}

    You will then see the three lines (hamburger menu icon) below the title and tagline. If you tap that the menu will appear.

  • Unknown's avatar
    aworkinghand · Member ·

    Ah I see – thanks for this – really helpful.

    So there is no way of the menu items showing up without having to click on the menu button then?

    Also I was wondering if you might know how to put a line between the posts and the widgets at the bottom – to separate them a little?
    Is that possible? Thanks

    R

  • Unknown's avatar
    thesacredpath · Member ·

    For the border between the widget area and the content, add the following to your custom CSS and you can adjust the width and color of the border line as desired. 

    #secondary {
	border-top: 1px solid #ccc;
}

    On the menu, themes have different designs for the menu depending on the what device the site is being viewed on, and the menu minimizes for smaller screens on tablets and phones. The menu design actually changes so that it will work with touch devices. This is particularly important when the site has submenus as you can’t “hover” over a menu item on a touch device to open the submenu.

    If you are not going to use submenus, then the following CSS will make the main full menu appear at all times. If you later decide to use submenus, you will have to remove the following CSS. 

    /*make full menu visible all the time*/
@media screen and (max-width: 959px) {
	.main-navigation ul {
		display: block;
		text-align: center;
	}
	.main-navigation ul li {
		display: inline-block;
		margin-left: 10px;
		margin-right: 10px;
	}
	.main-navigation .menu-toggle {
		display: none;
	}
	.main-navigation::before, .main-navigation::after {
		background: none;
	}
}
  • The topic ‘Viewing website on mobile phone – Ilustratr’ is closed to new replies.