Search Results for 'mobile'

We provided a solution in a similar topic, the user wanted to display a bigger logo in the mobile menu. So we provided a code to increase the logo size while maintaining a proper positioning for the menu and search icons. That code would look like this on your website
– https://www.screencast.com/t/05EzKKphvW
The same size will be kept when sticky
– https://www.screencast.com/t/QFm3Fbm9OVwA
So you could try it and see if this is how you want it, the code could be modified if needed. This is the code, it can be entered in Theme panel->Custom CSS

@media (max-width: 767px) {
.td-header-wrap .td-header-menu-wrap-full, .td-header-wrap .td-header-menu-wrap, .td-header-wrap .td-header-main-menu, #td-header-menu {
height: 100px !important;
}
#td-top-mobile-toggle,
.header-search-wrap {
top: 23px;
}
.td-main-menu-logo img {
max-height:100px;
}
.td-header-menu-wrap.td-affix {
transform: translate3d(0px, 0px, 0px)!important;
}
.td-header-style-6 .td-main-menu-logo img{
max-height: 100px;
}
}

I believe those columns might be hidden on mobile. Please edit the page with the tagDiv composer and check if that is the case. Click on the columns that are not displayed and see if they are hidden on mobile
– https://www.screencast.com/t/H8LlYhWo8l
– https://www.screencast.com/t/4ZA3PT1EgVGx
That would be the case, I see those 2 columns are hidden on mobile
– https://www.screencast.com/t/l98IqgF1sx1p

Hi,

You could change that background color in the demo stylesheet
– https://www.screencast.com/t/q7aj5IGs
The demo you have installed uses an overlay menu page template. On mobile a background color is set so it will not be transparent. If it would be transparent when sticky it will look like this
– https://www.screencast.com/t/mIbOVsnI1ts
But you could change the black color in a different color as shown. Or further override it with a code like this (in Theme panel->Advanced CSS in the phones section)
– https://www.screencast.com/t/WugzgEDNjL

.td-construction.page-template-page-pagebuilder-overlay .td-header-wrap .td-header-menu-wrap.td-affix {
background-color: #fff!important;
}

Thanks

Hi,

That is the new social sharing functionality, when there is not enough space available to display all the socials they will be hidden and an option will be displayed to show them (a “+” sign).

I could give you a code you could try, to remove the text on the socials on mobile, thus creating more space. Enter it in Theme panel->Advanced CSS in the phones section.

.td-post-sharing-visible .td-social-but-text {
display: none;
}

Hi,

We could take a look of you could at the issue if you could provide a link to that page. I have placed info boxes in a 4 column split row
– https://www.screencast.com/t/n4Dt5qi0A1s
On mobile they are all displayed one below the other
– https://www.screencast.com/t/61clCubeOqN

Hello flo2paclegacy,

I have inspected your website and I saw that you are using the Mobile Theme. So, if you want to display more ads for that mobile version you should add the Ad Code to the right fields from here -> https://www.screencast.com/t/RQSiDZsIIk in Mobile Ads.

Thanks for your understanding!

Hi,

So you want to increase the size of the mobile top menu section
– https://www.screencast.com/t/zO3er2gEEL
The default height of the mobile menu is 54px, it could be increased if that is what you want. Also the menu and search icon together with the logo will have to be taken into account as they will not look properly if the height is increased.
If this is what you want to do I will try to give you a solution, let me know.

Hi,

You can see how the website will look on mobile in the tagDiv composer as you are building the page
– https://www.screencast.com/t/W8TmMnur6BMS
You could use the CSS section to position the elements in the page differently (by adding margins and negative margins, padding etc). Those will only apply on mobile when mobile is selected
– https://www.screencast.com/t/Dcvz7cCYacwu
Maybe this information is helpful for you.

Indeed the mobile theme has different files then the main theme. These are located in the mobile folder
– https://www.screencast.com/t/hgrGL0lYiGh
That is where all the mobile theme files are located, if you want to make modifications to them. For the footer logo on mobile you could use a code like this to reduce it if needed
– https://www.screencast.com/t/PFltz9Kjk8

.td-footer-logo img {
max-width: 50%;
}

Mobile theme custom CSS can be entered in Theme panel->Mobile theme->Custom code.