Search Results for 'mobile theme'

Hi,

Please do not post such export codes in the topic, it is causing problems to the forum functionality.
The Health demo you mention has custom design as all demos have, in this case including a background color set for the mobile menu bar by the demo. This would override the color you are trying to set through the theme panel.
A solution would be to remove this design choice from the demo stylesheet
– https://www.screencast.com/t/BrvYKagQOoEE
A different solution would be to use a similar code to change the background color
– https://www.screencast.com/t/KYHmMwX9K
This code has to be entered in Theme panel->Custom CSS section, if you decide to use it.

@media (max-width: 767px) {
.td-header-wrap .td-header-main-menu {
background-color: #219ed3!important;
}}

Let us know if you require further help, or you have more questions.

Thanks

Hi,

Please provide a link to your website so we can inspect the mobile issue. If you updated the theme, please update Visual composer as well
– https://forum.tagdiv.com/how-to-update-visual-composer-plugin/
Maybe make a backup in case something unexpected happens.
If you decide to switch to the tagDiv composer, you will have to recreate all your pages with it
– https://forum.tagdiv.com/visual-composer-tagdiv-composer-transition/

Thanks

Hi,

You could use some CSS to customize how it displays. Something like this will work for the present situation
– https://www.screencast.com/t/MVOHZ7MTcW
This is the code used, enter it in Theme panel->Custom CSS if you decide to use it

.td-menu-background,
.td-mobile-container {
width:75%;
}

You can use the browser inspector to identify the elements present on the page and their classes and create custom code
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Hi,

It should work, that is how the mobile menu bar background color is supposed to be changed
– https://www.screencast.com/t/bGeJpiQf
– https://www.screencast.com/t/Gm4ws5dMI4hN
A possible cause for the change to not be displayed could be caching. Please try and clear any caching installed and check the results.
If there is still a problem please provide a link to your website so we can inspect it. Configure the theme panel color before with the color you want. Maybe we can identify what is happening.

Thanks

Hello Ginebiene,

I have inspected again your website and I saw that you are using Visual Composer elements inside the post content and if you are using the mobile theme, thatțs why you bring the shortcodes on mobile devices because the mobile theme plugin does not recognize any shortcodes. The easier way, in this case, would be to disable the mobile theme because the theme will be switched to the general responsive mode and then, all of the shortcodes will be correctly displayed for any devices.

Thanks for the message!

Hi,

It seems there is a problem with the mobile functionality. Please try as a test to deactivate all plugins except theme plugins, and clear all caching. If possible deactivate the caching plugin as well.
Then check if the pagination issue is fixed. I have tested this on mobile while having only theme plugins active, there is no problem with the mobile pagination. So it could be a plugin or maybe if you have made any modifications to the theme files.

Thanks

Hello Ginebiene,

I have inspected your website on my iPhone and it seems to work as expected and the shortcode does not appear. Also, I saw that you are using the Mobile Theme plugin which has a default structure and which do not recognize any additional shortcode like above map route. If you want to display the exact layout from the desktop on mobile devices but the responsive mode, you should simply disable the mobile theme plugins. For more information about mobile plugin, please check the following useful documentation here -> https://forum.tagdiv.com/the-mobile-theme/

Hope this helps!

Thanks for your understanding!

Hi,

The top menu will not be displayed on mobile. It could be made to appear with custom code, like this for example
– https://www.screencast.com/t/F4Uj2zte22H
This is the code used, enter it in Theme panel->Custom CSS

@media (max-width: 767px) {
.td-header-top-menu-full,
.td-header-sp-top-menu {
display: block!important;}
.menu-top-container {
margin-right:0;
}}

Thanks

Hi,

It will require to load the font first, then apply it wit CSS for the elements you want. This is a similar topic – https://forum.tagdiv.com/topic/change-mobile-theme-font/
More useful information here – https://developers.google.com/fonts/docs/getting_started
So load the font first, then identify the elements where you want to apply it with the browser inspector for example
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Hi,

The top grid cannot be disabled, unless you remove all posts from the Featured category so it will not appear, but that is not a good solution.
You could achieve that a different way, it will require a modification to the mobile front page template. The slider can be then placed above the top grid, like this
– https://www.screencast.com/t/EdPqz4Ode
– https://www.screencast.com/t/F5pmyn1oY1

<?php echo do_shortcode ('enter shortcode here'); ?>

The result would be like this – https://www.screencast.com/t/iyizmSRu0a
Some margins could be added to top and bottom if needed
– https://www.screencast.com/t/TagJsncTRb
This would be the code for that, you can modify the pixel values as you wish, then enter the code in Theme panel->Mobile theme->Custom CSS code section

.rev_slider_wrapper {
margin-top:5px!important;
margin-bottom:5px!important;
}

If you want the slider to be full width (no margin left or right) that can be done in the slider settings
– https://www.screencast.com/t/KBRtdV3o7y7q
– https://www.screencast.com/t/IhIWzEvv
Result – https://www.screencast.com/t/sPIvQk6BdT

The top and bottom margin would be like this if you make the slider full width
– https://www.screencast.com/t/866eQxCEh

.forcefullwidth_wrapper_tp_banner {
margin-top:5px!important;
margin-bottom:5px!important;
}

Thanks

Hello latihlogika,

I guess that you want to stretch the image for mobile devices, right? You should simply eliminate the paddings through this code. Place it in Theme panel -> Custom CSS Area.

@media (max-width: 767px){
.td-container, .tdc-row {
padding-left:0;
padding-right:0;
}
}

The result is here -> https://www.screencast.com/t/4Jq5oqB5Gfia

Thanks for the message!

Hi,

That will be the case. If the mobile theme plugin is disabled, then the same content from desktop will be displayed on all devices. The mobile theme plugins is optional, you can simply leave it deactivated.
If you choose to use it, please note that mobile page content will have to be entered through the mobile editor
– https://www.screencast.com/t/OuxeGzZD6pq
The plugin comes with predefined templates for the homepage, posts, category pages etc. You can find out more information here
– https://forum.tagdiv.com/the-mobile-theme/
If you would like to place a revolution slider on a mobile page, enter the slider shortcode in the mobile editor for that page
– https://www.screencast.com/t/OKRydevZWSd9
– https://www.screencast.com/t/YLe8R2WIAu
– https://www.screencast.com/t/c7iKYrjQddP

Thanks