Recent
Categories
View Replies (3)

Kindle - responsive resizing for mobile devices

0
Votes
Undo
  1. keithvb
    keithvb
  2. Sherlock Holmes
  3. Commercial Templates
  4. Monday, 17 March 2014
  5.  Subscribe via email
On website: new3.thesciencecouncil.com

I'm unable to get the right css to make the logo resize for a narrow screen
Use of "height: auto;" causes the logo image to disappear

The text that floats over the image with the globe doesn't stack over the lower items
when the screen narrows.
If I make it static it will but then doesn't float over the image
.top-1 .custom {
position: relative;
}
.slideshow-text {
display: block;
z-index: 40;
position: absolute;
left: 50px;
top: 60px;
height: auto;
color: #000;
font-style: italic;
font-size: 10pt;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

thanks again,

Keith
Responses (3)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Keith

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Keith

We have added the following to the Custom CSS field of your templates parameters and your logo appears to be now responding correctly...


@media only screen and ( max-width: 767px ) {

h1.logo a {

    background-size: 400px auto;

    top: 45px

}}

@media only screen and (max-width: 440px) {

h1.logo a {

    background-size: 260px auto;

    top: 50px;

}}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 2
keithvb
keithvb
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks, works well.
I made some additions/changes to the custom css

/*================ responsive stuff =====================*/
@media only screen and ( max-width: 960px ) {
/* shrinks logo for small desktops to avoid cutting off right end */
h1.logo a {
background-size: 700px auto;
top: 20px
}
/* causes text floating over globe image to "stack" */
.slideshow-text {
position: static;
font-size: 10pt;
}}
@media only screen and ( max-width: 767px ) {
h1.logo a {
background-size: 420px auto;
top: 20px
}}
@media only screen and (max-width: 440px) {
h1.logo a {
background-size: 250px auto;
top: 20px;
}}
  1. more than a month ago
  2. Commercial Templates
  3. # 3
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!