Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 11, 2015 at 4:42 pm #394443
    sjidesign

    Hi

    I am testing my site (currently viewing on a kindle and a pc), on pc it is looking fine but on kindle there are a number of issues, all responsive issues, not sure if the problems occur on ipad as I haven’t got one:

    website to view is http://176.32.230.26/pacerehab.com/

    Home Page

    1. The 3 columns (Patient Section, Referer Section and Latest News) all look good when the kindle is turned to landscape(all 3 columns should be as the picture with the text columns below it) but when you turn the kindle to portrait the images all appear below each other and the the text appear again all below each other.

    2. The testiomonial text size under “What Others say about us” is much too big, need this to be reduced for tablets and mobiles.

    3. Footer, I have this in 3 columns 1st column is an image, 2nd is text, 3rd again is an image.
    On the kindle, portrait, they are dropping each column below each other, I need to have them all on the same line.

    Page About us – More about us

    1. I have used the 1/4 column layout element to put 4 columns underneath my main text, I then inserted a Image (Media Element) into each column, so basically I want 4 responsive images underneath my main text. This is again not scaling down on kindle. Turning the kindle portrait I have all 4 images below each other and turning the kindle landscape I get 2 images next too each other and then 2 below.

    Many thanks in advance for any help

    Regards

    Dan

    February 12, 2015 at 11:24 am #394891
    sjidesign

    Fixed number 2 myself, any ideas on any of the others

    February 13, 2015 at 11:26 am #395584
    Ismael

    Hi!

    Thank you for using Enfold.

    1.) Move the text block with the links below the images on the same column layout as the images.

    3.) Use this to change the width of the footer columns:

    @media only screen and (max-width: 767px) {
.responsive #top #footer .flex_column {
width: 31%;
margin-left: 2%;
}}

    4.) It is the default settings or style of the columns when viewing on tablet size screens. The 1/4 column layout is quite small when you force it to show side by side on smaller screens.

    Best regards,
    Ismael

    February 13, 2015 at 1:22 pm #395676
    sjidesign

    Hi Ismael

    Fantastic, thank you so much for the code, looks great.

    Only thing that isn’t good now is that the logo’s and the text are not aligned at the bottom, they are all different.

    I have tried putting vertical-align: bottom; and align: bottom; but the right hand side logo is well above the left hand side logo.

    Any ideas?

    Thanks again for your help

    Dan

    February 13, 2015 at 1:24 pm #395679
    sjidesign

    Oh ps I changed your code to the following as I need the columsn different widths:

    @media only screen and (max-width: 767px) {
    .responsive #top #footer .flex_column.av_one_third.first {
    width: 8%;
    vertical-align:bottom;
    }
    .responsive #top #footer .flex_column.av_one_third:nth-child(2) {
    width: 71%;
    vertical-align:bottom;
    }
    .responsive #top #footer .flex_column.av_one_third:nth-child(3) {
    width: 20%;
    vertical-align:bottom;
    }
    }

    February 15, 2015 at 12:33 pm #396351
    Ismael

    Hey!

    Looks like the footer modification is also visible on desktop view. Please make sure that the modifications are inside the media query. Remove the font-size property here:

    .footer-info {
color: #888888;
font-size: 10%;
}

    If possible, please provide a screenshot of the vertical alignment issue.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.