Mobile site gap between body and header

thedaltonquilty · Member · Jul 14, 2017 at 4:02 pm
Copy link

Add topic to favorites
Hi guys,

Having an issue with the mobile site I’m creating. On the “Vacant Seat” page, there is a big gap between the image/text and the song list.

I’ve added this to my CSS as I believe it was the margin of h2 causing the gap.

(h1, h2 {
margin: 0px;
})

While this did reduce the gap, but only very slightly. I’ve noticed if I increase the width of the image, the gap decreases, but goes on top of the text to the right.

I’m viewing it on an iPhone 6.

Any ideas?

The blog I need help with is: (visible only to logged in users)
thedaltonquilty · Member · Jul 14, 2017 at 4:20 pm
Copy link
Changed the position to absolute and now we’re good.
thesacredpath · Member · Jul 15, 2017 at 12:48 am
Copy link
Hooray and you are welcome! Let us know if you have additional questions.
thedaltonquilty · Member · Jul 15, 2017 at 4:24 pm
Copy link
Hey @thesacredpath,

I’m back again to pester you with more questions!

I’m having trouble with media queries. Basically, I can get the site to look like how I want it to on mobile, but this messes up the desktop version, and vice versa. I cannot get both to look as they should.

For example, if you view the “Vacant Seat” page on mobile, the image is aligned left with the links aligned right. When viewed on desktop, the image covers the majority of the text.

Another issue is the colour overlay on the home page, the exact same happens, I can get it to work properly only on one or the other.

Also, in the CSS editor, only what I change underneath the media query causes actual changes, if I go to change any of the code above the media query, nothing changes. I’m quite lost on how to fix this.

Heres my media query code.
```
@media screen and (max-width: 550px) {
	.header-image {
		background-position: left;
	}
}

.footer-social-icons {
	width: 205px;
	display: center;
	margin-left: 12%;
	margin-top: 5%;
}

.social-icons li {
	margin-bottom: 40px;
}

.contact-form {
	margin-left: 5%;
	margin-right: 5%;
	width: 90%;
	text-align: left;
}

.thezenonsvacantseat {
	display: inline;
	margin: auto;
	width: 50%;
	top: -17%;
  position: absolute;
}

img {
	display: inline;
	margin-left: 25px;
	width: 85%;
}

.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 4%;
	right: 0;
	height: 99%;
	width: 85.5%;
	opacity: 0;
	transition: .5s ease;
	background-color: #4a699b;
}

.text {
	color: white;
	font-size: 17px;
	position: absolute;
	top: 50%;
	left: 50%;
	right: 15%;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
}
}
```
thesacredpath · Member · Jul 17, 2017 at 9:18 pm
Copy link
For example, if you view the “Vacant Seat” page on mobile, the image is aligned left with the links aligned right. When viewed on desktop, the image covers the majority of the text.

This is due to the position: absolute; setting on .thezenonsvacantseat. When you set something to position: absolute; it breaks the relationship that element has to all other elements, so it floats freely above all the others.

Can you tell me what you are wanting things to look like, both on mobile and on desktop? Right not, I’m not entirely sure as I’m seeing a number of issues depending on how wide the screen/window is when I view that page.
thedaltonquilty · Member · Jul 17, 2017 at 9:27 pm
Copy link
Oh right okay, I was not aware of that, that makes sense now.

I’m looking to have the page more or less the same on mobile and desktop. The cover art to the left, bottom aligned with the links on the right. Maybe I’ve made it more complicated than it needs to be!
thesacredpath · Member · Jul 18, 2017 at 8:18 pm
Copy link
We can do that, my only concern is having the two side-by-side on small screens. To make sure that there is enough room for your menu, the image will have to get pretty small. I’m not seeing your menu right now. If you want to add it back in we can give it a try.
thedaltonquilty · Member · Jul 18, 2017 at 9:34 pm
Copy link
By menu I mean the links to the right of the image, Spotify, iTunes etc. Is it possible to keep it how it is on mobile but just responsive for desktop?
thesacredpath · Member · Jul 19, 2017 at 3:30 am
Copy link
Ok, first off, modify the HTML in that page and for the opening div your spotify/itunes/etc. is in, remove the inline style and add the CSS class like this.
<div class="txt-rt">
Do the same for the div your image is in, and make it look like this.
<div class="img-lft">
Then replace your thezenonsvacantseat CSS rule with the following.
```
.thezenonsvacantseat {
    display: inline;
    margin: auto;
    width: 100%;
    top: -17%;
    position: relative;
}
```
Next, add the following to your custom CSS.
```
.txt-rt {
  float: right;
  width: 140px
}
.img-lft {
  width: calc(100% - 140px);
}
```
thedaltonquilty · Member · Jul 20, 2017 at 5:40 pm
Copy link
Thank you so much @thesacredpath! You are a life saver.
thesacredpath · Member · Jul 20, 2017 at 10:39 pm
Copy link
You are welcome, and thanks.

No items found.