mobile portrait view adjustments

  • Resolved catwingz

    (@catwingz)


    9 years, 7 months ago

    Hi,
    I am hoping the solution, or at least a part of it, can get covered here. This theme was so close to perfect for my client, but there was a tradeoff…
    What I have is a slider — not yours because my client had very specific ideas about his image captions — that is perfect, except for how it looks in mobile portrait view. His issue there is that the captions then completely cover the image. I have figured out how to fix that part with this code –

    .caption {
	background: rgba(0,0,0,.6);
	margin-bottom: -100px;
}

.rslides_container {
	margin-bottom: 20px;
}

.rslides {
	overflow: visible;
}

    This brings me to the theme part of the problem. I need to make the div.entry-content move down on the home page, in mobile portrait view only, so that it doesn’t get overlapped by the relocated caption. As I see it the first step is the code for relocating the .entry-content, with the second step the if>then for the mobile piece. Even getting me past step one would be a huge help.
    Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter catwingz

    (@catwingz)

    9 years, 7 months ago

    Oops, the site is here

    Thread Starter catwingz

    (@catwingz)

    9 years, 7 months ago

    This is a progress report. I could still use help with making this display only in the mobile portrait view on the home page.

    I realized that .entry-content contains both the slider and the text below it, so I have given the text a div of it’s own to allow me to control it’s place on the page. I have switched over to this site for the development.

    With the following code I have successfully relocated the caption block and moved the following text out of the way—

    .caption {
	background: rgba(0,0,0,.6);
	margin-bottom: -100px;
}

.rslides_container {
	margin-bottom: 20px;
}

.rslides {
	overflow: visible;
}

div#home-block {
	border: 3px solid #005bd2;
	position: relative;
	top: 60px;
}

div.entry-content {
	border: 3px solid #d2002d;
	padding-bottom: 2.3em;
}

    Thread Starter catwingz

    (@catwingz)

    9 years, 7 months ago

    This is the finished solution for anyone else who could use an example.

    `@media only screen and (max-width: 480px) {
    .caption {
    background: rgba(0,0,0,.6);
    margin-bottom: -100px;
    }
    .rslides_container {
    margin-bottom: 20px;
    }
    .rslides {
    overflow: visible;
    }
    div#home-block {
    position: relative;
    top: 75px;
    }
    div.entry-content {
    padding-bottom: 3.5em;
    }
    }

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘mobile portrait view adjustments’ is closed to new replies.