Theme is not mobile responsive?

  • Resolved piixDot

    (@piixdot)


    11 years, 1 month ago

    Hi there. I am totally new to wordpress. I have managed to get a site up to the way I want it to look. Still tweaking it. Not sure if this is where I would ask but I am using a Revolution Slider and I would like to bring the slider to the back of my menus. When I tried to bring the slider down, it covers my menus. How do I bring my slider to the back of my menus/menu pages? Thanks in advance.

    https://www.piixdot.com

Viewing 7 replies - 1 through 7 (of 7 total)
  • C W (VYSO)

    (@cyril-washbrook)

    Try this:

    (1) Remove the height declaration for header#masthead.

    (2) Change the margin declaration for #main to margin: 0 auto.

    Thread Starter piixDot

    (@piixdot)

    Hello thanks for responding so quickly. I will try that in a bit. However, I just viewed my site and I see a black box behind the slider. Is there anyway to delete the black box?

    Thread Starter piixDot

    (@piixdot)

    Hello there again. The problem I have now is when I view the website on mobile devices such as iPad mini, iPad air, Note II, etc….there is a HUGE gap between the header (revolution slider) and my home page where the pictures are on. There is a big black box between the slider/header and the main page. I do not know where to go to edit to fix this. Do I change some measurements in the Stylesheet (style.css)? Could you advise?
    Thanks. Site is https://www.piixdot.com

    Thread Starter piixDot

    (@piixdot)

    Ok I seemed to have fixed the header/slider issue on mobile devices. However, I no longer see the menus on my home page…It looks like the slider maybe in front of the menus. Below is what I have. What can I do so that I can get my menus back on my home page. Site is https://www.piixdot.com. Thank you.

    /* =Header
    ———————————————– */

    header#masthead {
    position: relative;
    width: 100%;
    height: 0 auto;
    background: #000;
    }
    hgroup {
    position: background;
    height: 100%;
    width: 100%;
    display: table;
    }
    hgroup div.site-text {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    }
    hgroup h1.site-title {
    font-size: 8em;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1.2;
    text-shadow: 7px 7px 0 rgba(0,0,0,0.5);
    padding-top: 40px;
    }
    hgroup h1.site-title a {
    text-decoration: none;
    opacity: 0.8;
    color: #fff;
    }
    hgroup h1.site-title a:hover {
    opacity: 1;
    }
    hgroup h2.site-description {
    color: #ccc;
    }

    C W (VYSO)

    (@cyril-washbrook)

    You haven’t done the second step that I suggested, which was designed to avoid exactly that problem.

    Change:

    #main {
   margin: -3.05em auto;
}

    to:

    #main {
   margin: 0 auto;
}

    Thread Starter piixDot

    (@piixdot)

    Hello, I have changed it to what you mentioned above. I input your info in style.css, below is what it looks like now. Still nothing ??

    /* =Content
    ———————————————– */

    #main {
    max-width: 1075px;
    margin: 0 auto;
    clear: both;
    background: rgba(255,255,255,0.8);
    padding: 0 3% 2%;
    overflow: hidden;
    position: relative;
    z-index: 1;

    Thread Starter piixDot

    (@piixdot)

    Resolved

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Theme is not mobile responsive?’ is closed to new replies.