Docs

[5wan]

Hi, I’m having several issues with the mobile version of my domain.
URL: http://www.duncanswan.me

Margin.
Large margin on right hand side (all pages).
Collapsed Menu button possible the cause?

Spacing / placement of ‘Collapsed menu button / twitter / Pinterest / Facebook icons’ in header.
Social Icons are off centre, collapsed menu button is spaced to the right (out of line with content).

Revolution Slider not loading / appearing on mobile (iPhone), using IE.

Page titles missing from (Home / Books / About Me / Contact)
eg.
http://www.duncanswan.me/
However, Page title is visible s on The ART page
http://www.duncanswan.me/the-art/

Large empty margin (gray area) in the content band (above text / image)
eg. http://www.duncanswan.me/books/
How do I reduce this?

[5wan]

This reply has been marked as private.

[5wan]

In relation the margin issue. I have some CSS thats in place to create a buffer for the social / share counters. (Otherwise they overlap the posts / images). How I do implement this only on the desktop version, and not mobile?

Thanks

[5wan]

Hi, another issue.

My Collapsed NAVBAR button is appearing on the desktop and tablet views.
What is causing this?

It should only appear for mobile.

Thanks

[Friech]

Hi There,

Thanks for writing in! For the right margin and social icons, please add this on your custom CSS.

@media (max-width:  979px) {
	.page .entry-wrap {
	   margin-right: 0;
	}
	.custom-social-icons .x-social-global {
		clear: both;
	}
}

On which page should we see the slider? I’m not seeing slider on any of the page even on desktop.

Actually, The Art, contact, and about page are showing the title. The issue with home and books page is the red gradient background was not applied. I see you applied the gradient background to the pages individually, you could apply the gradient background to all of those pages at once with the code below.

.page-id-6661 .entry-header,
.page-id-7013 .entry-header,
.page-id-6802 .entry-header,
.page-id-6810 .x-header-landmark.x-container.max.width,
.blog .x-header-landmark {
    background: rgba(255,0,0,1);
    background: -moz-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,0,0,1)), color-stop(100%, rgba(0,0,0,0.03)));
    background: -webkit-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
    background: -o-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
    background: -ms-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
    background: linear-gradient(to bottom, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#000000', GradientType=0 );
    max-width: none;
    height: 100px;
}

Large empty margin (gray area) in the content band (above text / image)

That is the first content-band top padding, set that to 0 or add a class ptn to that content-band.

Wrap your css code to this media query.

/*desktop only*/
@media (min-width: 980px) {
/*CSS HERE*/
}

Hope it helps, Cheers!

[5wan]

Hi, for the red / band / title.

The CSS above now has them displaying (excluding the ART Page) – but there are new issues.
1. The red bands / titles are off center for ALL pages except ART and HOME.
2. There is a black margin to the left of BOOKS / CONTACT / ABOUT

3. The font size of the title is also different.
ie. HOME > BOOKS

Note: I modified the above code + it has a separate string for page 6810 (The ART) as the CSS from above didn’t seem to work on this page.

ie.

/*****************************
*Red Page glow
*****************************/
.page-id-6661 .entry-header,
.page-id-7013 .entry-header,
.page-id-6802 .entry-header,

.blog .x-header-landmark {
background: rgba(255,0,0,1);
background: -moz-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,0,0,1)), color-stop(100%, rgba(0,0,0,0.03)));
background: -webkit-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
background: -o-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
background: -ms-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
background: linear-gradient(to bottom, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ff0000′, endColorstr=’#000000′, GradientType=0 );
max-width: none;
margin-top: 0px;
height: 100px;
width:100%;
margin:0 auto;
}

.page-id-6810 .x-header-landmark.x-container.max.width {
background: rgba(255,0,0,1);
background: -moz-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,0,0,1)), color-stop(100%, rgba(0,0,0,0.03)));
background: -webkit-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
background: -o-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
background: -ms-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
background: linear-gradient(to bottom, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ff0000′, endColorstr=’#000000′, GradientType=0 );
max-width: none;
height: 100px;
margin:0 auto;
padding-top:32px;
width:100%;
}

.h-wrapper {
width: 90%;
max-width: 1500px;
margin: 0 auto;
overflow: hidden;
}

[5wan]

Note: I’m only seeing the above issues on the mobile version.

Thanks

[5wan]

Next question:

How do I apply this slider margin to the mobile version only?

.rev_slider_wrapper {
margin-bottom: 5px !important;
}

[Christopher]

Hi there,

Please remove margin properties from following code :

@media (max-width:979px){
header.entry-header {
  font-size: 12px;
  margin-right: 35px !important;
  margin-left: 35px !important;
}
}

Add following code :

.textwidget h3 {
    font-size: 150%;
}

@media (max-width:480px){
.x-slider-container.above {
    margin-bottom: 5px;
}
}

Hope it helps.

[5wan]

Much better, thanks.
Another issue now though.

The Page titles are still appearing as different sizes on the mobile version.
And the HOME sits higher in the red band than the other pages (BOOKS / CONTACT etc).

Editing:

.h-landmark {
line-height: 2;
}

Fixes this for the homepage, but THE ART page title is then pushed too far down.
Is there a solution?

Thanks

[Rad]

Hi there,

You can target the home page’s landmark like this

.blog .h-landmark {
line-height: 2;
}

Cheers!

[5wan]

Cheers

[5wan]

Hi, my NAVBAR (Collapsed) button is appearing on the desktop version.

I cant find what’s triggering it.

[Lely]

Hi There,

This is because of a custom CSS syntax error. Please look for the following part on your custom CSS:

/MOBILE Version Tweaks
/NAVBAR Button / Margin

/Slider margin/

/Logo/

/Mobile only/

And many more comments.
The correct syntax for comments are like this:
/* Text inside */

It should be like this:

/* MOBILE Version Tweaks NAVBAR Button / Margin */

/* Slider margin */

/* Logo */

/* Mobile only */

Hope this helps.

[5wan]

Hi,

I fixed the syntax / comment issues.
But the collapsed NAVBAR / Menu is still appearing on my desktop versions.

Thanks

[Author]

Posts