responsive site overlaps

my site at http://mindfulnesspsychologywellbeing.com/

when viewed on a phone it does not re-size correctly
the sliders are cut off
the top logo overlaps
the front page features are cut off at the side
there seems to be a lot of wasted green space around the pages

any suggestions?

 

Hello,

You can resolve your issue, you just have to paste the CSS codes given below in Custom CSS section (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

body.compass_theme {
    background: white !important;
}
@media only screen and (max-width: 480px){
.header img {
    margin-left: -20px;
    width: 215px;
}
.sl-slides-wrapper img {
    width: 100% !important;
}
.feature-content {
    margin-left: -32px;
  }
.feature-content h2 {
    word-wrap: break-word !important;
}
 
.feature-content p {
    word-wrap: break-word;
    padding-right: 51px;
}
}

Hope it will resolve your issues

Thanks & Regards!
Priyanka
Inkthemes.com

 

ok - the above fixed that site ^

now I have a problem with this one http://smartartshosting.com.au/southside/sample-page/

when viewed on small screen (ie phone) there is a lot of space at each side of the page - how can I make the page fill the screen with very little unnecessary border

this is what I have in CSS Options

Code:

.page_content .content_bar img {
padding: 20px
}
.header {
margin: 20px 0px 0px 0px;
}
.header .menu_wrapper {
margin-top: 30px;
}
div.feature-image img {
width: 252px;
margin-bottom: 20px;
}
.page_content_wrapper {
    margin: 20px
}
.logo a img {
width: 90% !important;
}
@media only screen and (max-width: 480px){
.header img {
    margin-left: -20px;
    width: 215px;
}
.sl-slides-wrapper img {
    width: 100% !important;
}
.feature-content {
    margin-left: -32px;
  }
.feature-content h2 {
    word-wrap: break-word !important;
}
.feature-content p {
    word-wrap: break-word;
    padding-right: 51px;
}

 

Hello,

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){
.header .logo {
    margin-left: 70px;
    width: 385px;
}
.page_content_wrapper {
    margin: 20px;
    width: 579px;
    margin-left: -55px;
    text-align: center;
}
 
.page_content .content_bar {
    margin-bottom: 35px;
    padding-left: 115px !important;
}
 
.bottom_footer_content .copyrightinfo p {
      padding-left: 90px;
}
}

Note: Change the numeric value as per your requirement.

Hope it will resolve your issue

Thanks & Regards!
Priyanka
Inkthemes.com

 

the code above appears to be setting absolute sizes for the display size - given that there are many sizes of phone screens is there a better way to do it?

all I am trying to do is reduce the border on either side of the content when viewed on a phone

 

Hello,

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: 480px)
.page_content_wrapper {
    width: 441px;
    margin-left: -75px !important;
    text-align: center;
}
}

Note: Change the numeric value as per your requirement.

Thanks & Regards!
Priyanka
Inkthemes.com