responsive issues

on the site at http://smartawordpress.com/
site protection entry password is " aayt2015 "

I have a few issues with different size screens (see attached images of ipad size and phone size)


I have quite (well very) heavily customised the css (see attached txt file)

as you can see the problems are
- logo image is being compressed out of proportion
- leading on text of feature heading is overlapping
- iPad version lots of overlapping

 

Hello,

Greetings from InkThemes!

Please paste the code given below in Custom CSS section (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

@media only screen and (max-width: 767px) and (min-width: 481px){
.header {
    margin-top: 10px !important;
    left: 24% !important;
}
.home-content .page_info h1 {
    margin-bottom: 21px !important;
    margin-top: 21px !important;
        font-size: 32px;
}
}
 
@media only screen and (max-width: 480px){
.header {
    margin-top: -318px !important;
    left: 9%;
}
.home-content .page_info h1 {
    font-size: 28px;
}
}

Hope it will resolve your issue

Do let me know if you need more assistance,

Thanks & Regards!
Priyanka
InkThemes.com

 

Hi Priya

thank you - that helped a little

the text in now fine .....however

- on ipad size screen the top logo is compressed

- on iphone logo & nav bar are not appearing

(see attached)

 

Hello,

Please try this CSS code given below in Custom CSS section (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard for once.

Code:

@media only screen and (max-width: 481px){
.flexslider {
  margin-top: 159px !important;
}
.header {
      margin-top: -208px !important;
      left: 15% !important;
}
.header .logo {
    margin-left: -20px !important;
}
}
 
@media only screen and (max-width: 767px) and (min-width: 481px){
.header {
    margin-top: -319px !important;
}
}

Hope it will resolve your issue

Do let me know if you need more assistance,

Thanks & Regards!
Priyanka
InkThemes.com

 

sorry but it has still not fixed the issue

the logo is still being compressed and now the slider seems to be covering the nav menu

I have attached a pic & also a full copy of all the custom css - maybe there is some conflicting css code

 

Hello,

Could you please send us your dashboard details at [email protected] and we will do it for you?

Looking forward to your reply.

Thanks & Regards!
Priyanka
InkThemes.com

 

ok - i have done that - thank you!

 

Hello,

Thanks for the details..

We will get back to you soon...

Thanks & Regards!
Priyanka
InkThemes.com

 

some other things I notice are

on phone
- nav menu items appear under the image (so can't be tapped)
- nav menu in inner pages does not seem to work - it either is not visible or if visable does not open

 

Hi,

Could you please specify on which phone are you facing this issue? If possible, please let us know the pixel width of your phone with which you are concerned about.

Believe me, it will take us no time to fix all your issue once we are confirmed with your phone dimension details.

Looking forward to hear from you.

Thanks & Regards!
Nitin
InkThemes.com

 

it is an iPhone 5s which i believe is 1136 x 640 pixels

the password for the site is " aayt2015 "

I have attached a screen shot of how it looks currently on my iPhone 5s

when I resize my computers browser to approx ipad size the layout/menu seems ok but the logo is still being compressed

 

Hi,

Thank you for providing us the details.

You would be glad to know that we have fixed the issue as per your requirements.

Kindly check and acknowledge us for the same.

If you need something else, feel free to report us.

Thanks & Regards!
Nitin
InkThemes.com

 

ok the logo looks good on my phone now

Sorry but the pages are still not working correctly

issues are as follows
iPhone screen
- home page Nav menu appears under slider (so cannot be seen)
- interior pages have no logo
- interior pages have no nav menu (some of the nav menu appears when phone is sideways)

iPad
- home page Nav menu appears under slider (so cannot be seen)
- interior pages have a nav menu but it does not open

in both cases above I have flushed my cache & history before checking

It seems to me there may be screen definitions that are conflicting with each other (as they have all been added at different times to do different things)

I have restructured the custom css into sections to try to help save confusion - I have separated the screen size related custom css to the bottom & called it /* SCREEN SIZE DEFINITIONS */

I have a similar site that I have been developing at the same time which seems to be working better

I have attached the custom CSS from that one

thanks agin for your help !

 

if it makes it any easier I could live without the slider showing on the mobile size screen

 

also on a large screen the top logo is now aligned left and is compressed

previously it was centered and in proportion

 

ok - I have done some experimenting & I think i have it pretty close to what I want

II have hidden the slider on the smallest screen)

please leave the site as it is for the moment - I may re-open this thread once the (fussy!) graphic designer has had a look

thank you all again for your help!

 

ok - it's almost perfect

I have adjusted the css for specific screen sizes to control what shows & what does not
there is specific css for screen sizes
(max-width: 767px) and (min-width: 481px) for iPad
(max-width: 320px) for iPhone

as you will see from the 2 attachments...

iPhone
Home page h3 text is showing at top & being covered by the logo & nav bar
ideally I would like logo at top, the nav bar, then h3 text

iPad size
there is a large gap at the top of the page and the logo & main nav is covering the h3 text

I have made many edits to the css but cannot seem to fix these 2 elements - would you mind taking a look

I would prefer if you told me the css changes rather than doing them for me as I will learn that way ! ;-)

 

never mind - I have worked it out

please do not do any more edits to this site