Homepage Issues on Mobile

Hello joyceloh,

1) If you want to enlarge your logo size on your mobile mode, you should try a bit of CSS and add it in Theme panel->Custom CSS area, like this: http://screencast.com/t/Hu6ilCrf

@media (max-width: 767px){
.td-retina-data {
width:200px;
height:70px;
}
.td-main-menu-logo img {
max-width: 200px;
max-height:70px
}
}

The result you should see here: http://screencast.com/t/poBxwQrKrHr

2)If you want to reduce the padding-bottom and the margin-bottom you should also use a bit of CSS, like this:

.td_block_big_grid_3 {
padding-bottom:25px;
}
.td-a-rec-id-custom_ad_2 > div {
margin-bottom:25px;
}

The result you should see here: http://screencast.com/t/5Xfuc2l0nBEp

Hope this helps and let us know how it goes!

If is not what you mean, please provide more details.

Thank you for the message!

Hello joyceloh,

I’ve checked again your Custom CSS area and I saw that you have again some syntax errors. Please add the missed curly brace that I said you in the previous topic. If you have not closed all tags properly, all the codes from Custom CSS area do not work properly and gives you some syntax errors.

For your second question, if you want to have only on mobile mode, you have to use @media(), like this:

@media (max-width:767px) {
.td_block_big_grid_3 {
padding-bottom:10px;
}
.td-a-rec-id-custom_ad_2 > div {
margin-bottom:10px;
}
}


The result you should see here: http://screencast.com/t/AxYJhi2wxlx6

Please be more careful on “{” “}” for does not have syntax errors.

Hope this helps and let us know how it goes!

Thank you for the message!

Hi,
You can use this custom css to do it:

@media (max-width: 767px){
.home .td-main-page-wrap {
    padding-top: 0;
}
}

Result: http://screencast.com/t/GvJlH1Yj

Thank you!

• This reply was modified 10 years by Bogdan B..

Hi,

I’m not sure what you want to do and also you already have some custom css for the mobile logo as you set a max width and height – http://screencast.com/t/hQqdAfuuKuDd The logo image doesn’t have any padding top/bottom you could increase those values for max-width and height to enlarge it a little bit.

Thanks!

Hello joyceloh,

Please try to increase max-width value to 200px and max height value to 60px and your logo will be higher as you can see here -> http://screencast.com/t/pNg7om9Pg0
If is not what you mean, please provide more details about your desired changes and please provide more screenshots to show exactly how you want to display your logo on the mobile version. It is necessary to know these details because it is required to do some customizations which depend on many parameters.

Hope this helps and let us know how it goes!

Thank you for the message!