Home page not totally Responsive

Slider: The Read More button on the Slider is not displaying correctly when on mobile devices. See the attached image. Also, the arrows show up, but you can't click on them; they don't work.


Header: As you can see from the image, the logo is not responsive.


Footer: footer text is not responsive.

Can you please tell me how to make these 4 items responsive?

 

Hello,

Do let us know your website link.

Thanks & Regards
Gourav Shrivastava

 

This is my website link: http://wcac.dmediasites.com/

 

Hello,

We will fix it as soon as possible and update our theme, then download latest version of themes.

Thanks & Regards
Yogesh Bhade

 

I am using Subscribely version 1.0.5, and have made substantial changes to the css and code. Version 2 is very different, and I don't plan to use it. Can you tell me where to make the changes in version 1.0.5?
Thanks so much.

 

Hello
1. To make button responsive
Add following CSS to your style.css file or in custom CSS which you can find under appearance > theme options > style > custom css

Code:

.entry_btn {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffac82), color-stop(1, #ff5f09) );
    background:-moz-linear-gradient( center top, #ffac82 5%, #ff5f09 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffac82', endColorstr='#ff5f09');
    background-color:#ffac82;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
    text-indent:0;
    font-size: 15px;
    padding: 9px;
    border:1px solid #f7854d;
    display:inline-block;
    color:#ffffff;
    font-style:normal;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #969696;
}
.entry_btn:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5f09), color-stop(1, #ffac82) );
    background:-moz-linear-gradient( center top, #ff5f09 5%, #ffac82 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5f09', endColorstr='#ffac82');
    background-color:#ff5f09;
    text-decoration: none;
}.entry_btn:active {
    position:relative;
    top:1px;
}

Now you have to change some HTML markup in theme_actions.php file under the functions folder.
find the following code

Code:

echo '<a class="entry_btn" href="' . inkthemes_get_option('inkthemes_btn_link_2') . '"><span class="btn_left"></span><span class="btn_right">' . inkthemes_get_option('inkthemes_btn_text_2') . '</span></a>';

And remove <span class="btn_left"></span><span class="btn_right"></span>
The final code must look like this

Code:

echo '<a class="entry_btn" href="' . inkthemes_get_option('inkthemes_btn_link_2') . '">' . inkthemes_get_option('inkthemes_btn_text_2') . '</a>';

You need to do this for all the sliders.

2. To make logo image responsive
Add following css to your custom css in theme options

Code:

#header_wrapper .logo img {
max-width: 100%;
}
@media (max-width: 330px) {
#header_wrapper .logo img {
max-width: 84%;
}
}

3. Footer
As I can see you have following code in your custom css
#footer_bottom p {
width: 900px;
}
which is breaking your site on mobile devices.
change the width to 100%.

We have also fixed and updated the above issues in our theme version 1.0.6
You can download it from members area.
Hope it may help you.
Thank You

 

Wow, thank you so much for all this code. I can't wait to try it. I'll let you know how it goes!