-
AuthorPosts
-
September 26, 2018 at 6:22 pm #1014911
Hi:
I have a responsive issue I cannot solve concerning the “Phone Number/small info text” content. It is a heart icon, for favorites, which is linked to a page—code is below. It should remain where it is at about 990px when the mobile menu breakpoint kicks in, and the secondary menu remains where it is. But it does not. It drops down a line and becomes centered. I cannot fix it though I’ve tried everything.
I have it so it shows and works very nicely on mobile phones below about 767px. Between about 990 and 767 it drops down a line and becomes centered—but it should stay to the left of the secondary menu—”Careers”—and not drop down a line until it hits 767 where it breaks again. After 767 it works perfectly.
Can you help with this? It is a real estate site and about 75% of real estate viewers use mobile, so it must work well.
Below is all the related code and CSS I am usingand I have added login credentials for you.
Here is the code in the small info text field:
______________________________________________________________________
(hosted on WPengine) target="_blank" rel="noopener">Below is all the CSS I am using—some is essential to show th mobile menu whiole scrolling:
______________________________________________________________________/*—-SECOND MENU AND X-ELEMENT—-*/
@media only screen and (max-width: 767px) {
.responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
float: right;
width: 100%;
text-align: right;
margin: 0;
margin-right: 12px;
}
}
@media only screen and (max-width: 767px) {
.responsive .phone-info {
float: right;
width:100%;
clear: both;
text-align: right;
margin-top: -30px;
}
}@media only screen and (max-width: 1200px) {
.responsive #top #header .social_bookmarks {
display: block !important;
}
}/*—-END SECOND MENU AND X-ELEMENT—-*/
/* —- MOBILE MENU BREAKPOINT —- */
@media only screen and (max-width: 1200px; min-width: 768px) {
.html_mobile_menu_tablet .main_menu , .html_mobile_menu_tablet #header_main_alternate{display:none !important;}
.html_mobile_menu_tablet .container #advanced_menu_toggle, .html_mobile_menu_tablet #advanced_menu_hide{display:block !important;}
.html_mobile_menu_tablet #mobile-advanced{display:block !important;}
}/* —- END MOBILE MENU BREAKPOINT —- */
/* —- KEEP MOBILE MENU VISIBLE SCROLL —- */
#advanced_menu_toggle, #advanced_menu_hide {
position: fixed !important;
right: 3% !important;
top: 5% !important;
}@media only screen and (max-width: 1200px) {
#wrap_all {overflow: hidden !important; /*needed for mobile menu scrolling */}
}@media only screen and (max-width:1200px) {
.responsive #top #wrap_all #header {
position: fixed !important;
}
.responsive #top #main {
padding-top: 80px !important;
}
}@media only screen and (max-width: 1200px) {
#top #menu-item-search {
display: none;
}
}@media only screen and (max-width: 1200px) {
.main_menu{ right: -5px !important;}
}/* —- @media only screen and (max-width: 767px) {
#top .social_bookmarks { display: none !important; }} —- *//* —- END KEEP MOBILE MENU VISIBLE SCROLL —- */
September 27, 2018 at 5:58 am #1015119Hey blaircomm,
Thank you for using Enfold.
This css code should help.
@media only screen and (max-width: 989px) and (min-width: 768px) { .responsive.html_mobile_menu_tablet .phone-info { float: right; width: auto; clear: none; text-align: right; } }
Best regards,
IsmaelSeptember 27, 2018 at 7:04 pm #1015460Magnificent!
Thank you.
— Michael
September 27, 2018 at 8:14 pm #1015499Hi,
I’m glad that was resolved. If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon -
AuthorPosts
- The topic ‘Phone Number/small info text responsive behavior’ is closed to new replies.