My logo in the menu looks good on the desktop and also looks good on mobile but somewhere in between there it gets out of whack. You can see what I’m talking about here. Should I resize the logo? Is there anything I can do?
I made a video of the issue here: http://youtu.be/y4WOaxE6QKo?hd=1
or
https://www.InterestingAnswers.com
Thanks
Hi,
That seems to happen on the tablet portrait viewport, so you could try something like this
– https://www.screencast.com/t/s36OI0NXmsb
Give it a try
@media (max-width: 1018px) and (min-width: 768px) {
.td-header-style-6 .td-container {
width: 100%;
}
.sf-menu>li>a {
padding: 0 8px;
}}
Thanks
It’s still happening.
This is my other CSS, if it matters:
/* widget title color start */
.td-theme-wrap .block-title > span, .td-theme-wrap .block-title > span > a, .td-theme-wrap .widget_rss .block-title .rsswidget, .td-theme-wrap .block-title > a, .widgettitle, .widgettitle > a, .td-trending-now-title, .wpb_tabs li.ui-tabs-active a, .wpb_tabs li:hover a, .vc_tta-container .vc_tta-color-grey.vc_tta-tabs-position-top.vc_tta-style-classic .vc_tta-tabs-container .vc_tta-tab.vc_active > a, .vc_tta-container .vc_tta-color-grey.vc_tta-tabs-position-top.vc_tta-style-classic .vc_tta-tabs-container .vc_tta-tab:hover > a, .td-related-title .td-cur-simple-item, .woocommerce div.product .woocommerce-tabs ul.tabs li.active, .woocommerce .product .products h2:not(.woocommerce-loop-product__title), .td-theme-wrap .td_block_template_2 .td-block-title > *, .td-theme-wrap .td_block_template_3 .td-block-title > *, .td-theme-wrap .td_block_template_4 .td-block-title > *, .td-theme-wrap .td_block_template_5 .td-block-title > *, .td-theme-wrap .td_block_template_6 .td-block-title > *, .td-theme-wrap .td_block_template_6 .td-block-title::before, .td-theme-wrap .td_block_template_7 .td-block-title > *, .td-theme-wrap .td_block_template_8 .td-block-title > *, .td-theme-wrap .td_block_template_9 .td-block-title > *, .td-theme-wrap .td_block_template_10 .td-block-title > *, .td-theme-wrap .td_block_template_11 .td-block-title > *, .td-theme-wrap .td_block_template_12 .td-block-title > *, .td-theme-wrap .td_block_template_13 .td-block-title > span, .td-theme-wrap .td_block_template_13 .td-block-title > a, .td-theme-wrap .td_block_template_14 .td-block-title > *, .td-theme-wrap .td_block_template_14 .td-block-title-wrap .td-wrapper-pulldown-filter .td-pulldown-filter-display-option, .td-theme-wrap .td_block_template_14 .td-block-title-wrap .td-wrapper-pulldown-filter .td-pulldown-filter-display-option i, .td-theme-wrap .td_block_template_14 .td-block-title-wrap .td-wrapper-pulldown-filter .td-pulldown-filter-display-option:hover, .td-theme-wrap .td_block_template_14 .td-block-title-wrap .td-wrapper-pulldown-filter .td-pulldown-filter-display-option:hover i, .td-theme-wrap .td_block_template_15 .td-block-title > *, .td-theme-wrap .td_block_template_15 .td-block-title-wrap .td-wrapper-pulldown-filter, .td-theme-wrap .td_block_template_15 .td-block-title-wrap .td-wrapper-pulldown-filter i, .td-theme-wrap .td_block_template_16 .td-block-title > *, .td-theme-wrap .td_block_template_17 .td-block-title > * {
color: #523F6D!important;
}
/* widget title color end */
/* widget title underline color start */
body .block-title {
border-color: #523F6D;
}
/* widget title underline stop */
/* trending area border color start */
.td-trending-style2 {
border-color: inherit;
}
/* trending area end */
/*latest answer category*/ .td-subcat-filter .td-subcat-list a{color:black!important;}
/* block navigation arrow color */ .td-next-prev-wrap a {color:black!important;}
.entry-crumbs a {
color: black;
}
.entry-crumbs {
color: black;
}
/* Keeps main menu logo from screwing up in tablet view */
This is so the logo doesn’t mess up for tablet viewers
..you can test here: https://www.InterestingAnswers.com
THANKS!
Let me format that better. Thanks
/* widget title color start */
.td-theme-wrap .block-title > span, .td-theme-wrap .block-title > span > a, .td-theme-wrap .widget_rss .block-title .rsswidget, .td-theme-wrap .block-title > a, .widgettitle, .widgettitle > a, .td-trending-now-title, .wpb_tabs li.ui-tabs-active a, .wpb_tabs li:hover a, .vc_tta-container .vc_tta-color-grey.vc_tta-tabs-position-top.vc_tta-style-classic .vc_tta-tabs-container .vc_tta-tab.vc_active > a, .vc_tta-container .vc_tta-color-grey.vc_tta-tabs-position-top.vc_tta-style-classic .vc_tta-tabs-container .vc_tta-tab:hover > a, .td-related-title .td-cur-simple-item, .woocommerce div.product .woocommerce-tabs ul.tabs li.active, .woocommerce .product .products h2:not(.woocommerce-loop-product__title), .td-theme-wrap .td_block_template_2 .td-block-title > *, .td-theme-wrap .td_block_template_3 .td-block-title > *, .td-theme-wrap .td_block_template_4 .td-block-title > *, .td-theme-wrap .td_block_template_5 .td-block-title > *, .td-theme-wrap .td_block_template_6 .td-block-title > *, .td-theme-wrap .td_block_template_6 .td-block-title::before, .td-theme-wrap .td_block_template_7 .td-block-title > *, .td-theme-wrap .td_block_template_8 .td-block-title > *, .td-theme-wrap .td_block_template_9 .td-block-title > *, .td-theme-wrap .td_block_template_10 .td-block-title > *, .td-theme-wrap .td_block_template_11 .td-block-title > *, .td-theme-wrap .td_block_template_12 .td-block-title > *, .td-theme-wrap .td_block_template_13 .td-block-title > span, .td-theme-wrap .td_block_template_13 .td-block-title > a, .td-theme-wrap .td_block_template_14 .td-block-title > *, .td-theme-wrap .td_block_template_14 .td-block-title-wrap .td-wrapper-pulldown-filter .td-pulldown-filter-display-option, .td-theme-wrap .td_block_template_14 .td-block-title-wrap .td-wrapper-pulldown-filter .td-pulldown-filter-display-option i, .td-theme-wrap .td_block_template_14 .td-block-title-wrap .td-wrapper-pulldown-filter .td-pulldown-filter-display-option:hover, .td-theme-wrap .td_block_template_14 .td-block-title-wrap .td-wrapper-pulldown-filter .td-pulldown-filter-display-option:hover i, .td-theme-wrap .td_block_template_15 .td-block-title > *, .td-theme-wrap .td_block_template_15 .td-block-title-wrap .td-wrapper-pulldown-filter, .td-theme-wrap .td_block_template_15 .td-block-title-wrap .td-wrapper-pulldown-filter i, .td-theme-wrap .td_block_template_16 .td-block-title > *, .td-theme-wrap .td_block_template_17 .td-block-title > * {
color: #523F6D!important;
}
/* widget title color end */
/* widget title underline color start */
body .block-title {
border-color: #523F6D;
}
/* widget title underline stop */
/* trending area border color start */
.td-trending-style2 {
border-color: inherit;
}
/* trending area end */
/*latest answer category*/ .td-subcat-filter .td-subcat-list a{color:black!important;}
/* block navigation arrow color */ .td-next-prev-wrap a {color:black!important;}
.entry-crumbs a {
color: black;
}
.entry-crumbs {
color: black;
}
/* Keeps main menu logo from screwing up in tablet view */
@media (max-width: 1018px) and (min-width: 768px) {
.td-header-style-6 .td-container {
width: 100%;
}
.sf-menu>li>a {
padding: 0 8px;
}}
well that formatting didn’t work. oh well. i tried.
Seems to work now – https://www.screencast.com/t/AM9X0PDyRTl
It was probably caching or maybe browser cache that prevented the code from applying.
Ya, you are right. I keep thinking that one day I will stump you guys.
dozens of questions later………….. nope
Thanks for the help,
Ryan
