Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Pages: 1
I have been experimenting with text and images on the Page Copy of a page. Suddenly the menu jumps to the bottom of the page. It is still there but at the bottom. This is the page in question:
http://garylittle.com/test1/
If you go to any other page the menu is correctly placed.
I cannot figure out what I did. Here is the code from that page:
<style>
h1 {
text-align: center;
font-size: 1.3em;
color: white;
}
h2 {
text-align: left;
color: white;
}
div.img {
border: 1px solid #ccc;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<h2>Responsive Image Gallery</h2>
<h2>Resize the browser window to see the effect.</h2>
<div class="responsive">
<div class="img">
<a target="_blank" href="/testingbutter/testbutter-1.jpg">
<img src="/testingbutter/testbutter-1.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc">Butterfly 1</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="/testingbutter/testbutter-2.jpg">
<img src="/testingbutter/testbutter-2.jpg" alt="Forest" width="300" height="200">
</a>
<div class="desc">Butterfly 2</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="/testingbutter/testbutter-3.jpg">
<img src="/testingbutter/testbutter-3.jpg"" alt="Northern Lights" width="300" height="200">
</a>
<div class="desc">Butterfly 3</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="/testingbutter/testbutter-4.jpg">
<img src="/testingbutter/testbutter-4.jpg" alt="Mountains" width="300" height="200">
</a>
<div class="desc">Butterfly 4</div>
</div>
</div>
</div>Last edited by gwlco (2016-08-09 03:39:40)
Offline
there's a closing head tag in there right after your the closing style tag. First try eliminating that.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
A few comments:
1) There is a
<p></div></p>at the end of the four images that shouldn't be there. I would expect that this is the main cause, apart of the closing </head> tag that Rod already mentioned.
2) The page shows an error:
http://garylittle.com/favicon.ico: Failed to load resource: the server responded with a status of 404 (Not Found)
You might want to add a proper favicon.
3) custom-sample.css shows
/*.page__tray {
*border: 1px solid black
*}
.copyright p{
text-align: center;
}
<div class="tray-frame">
......This is new content...
</div>There is no closing for the comment (*/ missing). And <div...</div> is html and not CSS. So it does not belong in this file.
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
Thanks Daniel,I cleaned up the .css file and got rid of the <p></div></p>
and Rod I got rid of the </head>.
It now works, thank you all for the help.
Offline
Pages: 1