icon list text not responsive

thanks for the suggestion. tried it, but didn’t quite work out. See the image below,

http://snag.gy/omW38.jpg

is there a way to make “rehab program” and “platelet rich plasma” behave the same as the other four text strings, move to the bottom of the icons when resizing the width of the browser?

I delete this,

.avia-icon-list .iconlist_content_wrap {
overflow: visible !important;
}

replace with this,

@media screen and (max-width:900px) and (min-width:780px) {
.article-icon-entry { display: inline-block !important; }
}

this is what I see, better, but still some problems with the text on the right hand being cut off.

http://snag.gy/IGwb4.jpg

If I combine both codes, still not quite right

http://snag.gy/M4uch.jpg

I tested on both chrome and firefox on window 8. Right now you should see the image like this

http://snag.gy/M4uch.jpg

because I have combine both codes aboev.

If I’m only using

@media screen and (max-width:900px) and (min-width:780px) {
.article-icon-entry { display: inline-block !important; }
}

you’d see the text on the right hand side gets cut off.

http://snag.gy/IGwb4.jpg

yes, I’m using 100%. This is the screenshot from the second code ,

http://snag.gy/F9umy.jpg

@media screen and (max-width:900px) and (min-width:780px) {
.article-icon-entry { display: inline-block !important; }
}

As you can see, some texts are still cut off just right before the texts are pushed to second line.

it helps a little bit. But the problem is not solved, as the browser size is reduced in width, you get this

http://snag.gy/sSsx3.jpg

then further reduced in width to ipad portrait, i’m still getting this,

http://snag.gy/vvmIg.jpg

Andy, I tried appending your code to what I have on quick css. It didn’t seem to help. So I didn’t paste it over. This is the code I have up there,

.logo {
float: none !important;
left: auto !important;
position: relative !important;
margin: 0px auto !important;
transform: none !important;
text-align: center !important;
}
.logo img {
display: block !important;
margin: 0 auto;
}

.html_header_top.html_logo_center .logo { -webkit-transform: none; }

@media only screen and (max-width: 1100px) {
#header_main_alternate {
display: none !important;
}
#advanced_menu_toggle {
display: block !important;
}
}

@media only screen and (max-width: 1100px) {
.html_header_top.html_header_topbar_active.html_header_sticky.html_bottom_nav_header #top #main {
padding-top: 119px; }}

.page-id-3442 td.avia-highlight-col {
width: 50%;
}

.main_color .avia-data-table .avia-highlight-col, .main_color table, .main_color tr:nth-child(odd), .main_color .pricing-table>li:nth-child(odd), .main_color .pricing-extra {
background: transparent;
border-color: transparent;
}

.comment-entry { display: none; }

#top .post-title a {
color: #a81010;
}

@media screen and (max-width:900px) and (min-width:780px) {
.article-icon-entry { display: inline-block !important; }
}

@media screen and (max-width:900px) and (min-width:780px) {
h4.iconlist_title a { font-size: 15px !important; }
}

the last two I believe are included to resolve the icon/text truncating issue.

I took a screenshot of what’s going on.

There are two problems.

1. at 0:20, you’d see that the text font size are all reduced. Great! and all text are pushed to BELOW the icon, Great! Except that the “Prolotherapy” stays at where it was. Can I make the Prolotherapy behaves just like the rest of the text, pushed below the icon, too at the instant when all texts are pushed below. As the screen width is further reduced, now the prolotherapy is pushed below the icon.

2. at 0:26, you’d see the texts are all re-enlarged and jump to the side of the icons! This is so weird! Can I just make it stay down there until they become single column when the screen is further reduced?

• This reply was modified 9 years, 7 months ago by kailibuy.