[Resolved] Mobile view

[Pete Baker]

Hi all,

I’d like to improve the appearance of the mobile view of my website http://www.cycletourstore.co.uk

The landscape view from my iphone I’m happy with
But the portrait mobile view is too deep and takes up too much of the screen. Also the logo ends up beneath the tagline.

Is it possible to make the portrait version of the site title and logo more like the landscape version?

[Tom]

You can always use media queries to target elements at certain widgets.

For example, you can decrease the font size of your header when the screen size hits 500px.

@media all and (max-width: 500px) {
      .main-title {
            font-size: 25px;
      }
}

[Pete Baker]

Tom, thank you, brilliant as ever! This is how it shoes now on my iphone –

Do you have any suggestions on how I can reduce the size of my logo (bike) and arrange it so that it appears on the same line after the title ‘cycle tour store’ or I’m happy to lose it altogether if need be on the mobile portrait view.

Thanks again
Pete

[Tom]

Hmm.. You could try this:

@media all and (max-width: 500px) {
      .site-branding {
            max-width: 80%;
      }
}

Or you could hide it:

@media all and (max-width: 500px) {
      .site-logo {
            display: none;
      }
}

[Baba]

I am also trying to make the header text size smaller when shown on display less than 768px.
But it seems to be not changing anything. I have pasted the code below.

The text is inside page header tab content area.

I appreciate for your help.

—
/*media view for mobiles less than 768*/

@media screen and ( max-width: 768px ) {

.main-title {
font-size: 20px;
}

}
—

[Tom]

You’ll need to add that code inside your child theme stylesheet, or inside a custom CSS plugin.

More info here: http://generatepress.com/knowledgebase/adding-css/

[Pete Baker]

Thanks Tom, great support as ever. I had to hide the logo as it just wasn’t looking right.

In case it helps anyone –

Iphone screen portrait –

Iphone screen landscape

Custom CSS box looks like this –

@media all and (max-width: 460px) {
.site-logo {
display: none;
}
}
.stylish-popular-widget {
min-height:150px;
}

@media all and (max-width: 460px) {
.main-title {
font-size: 30px;
}
}
.site-branding {
display: inline-block;
vertical-align: middle;
}

.site-logo {
float: centre;
}
.woocommerce .page-header-image-single {
display: none;
}

[Kathleen]

Hi Tom,

How do we reduce the size of the the entire site to make it look not so squished in the portrait position?

Maybe reduce the size of the body?

[Tom]

You could reduce the content padding, or reduce the body font size:

@media all and (max-width:768px) {
      body {
            font-size: 15px;
      }
      .separate-containers .inside-article,
      .one-container .site-content {
            padding: 15px;
      }
}

[Author]

Posts