progress bar with link to pop up text

hello,

there is text braking etc. if you watch the site from a mobile or making the browser smaller then you should see that it´s not that nice anymore.

Yes, it helps a little bit but when making the browser very small like mobile then it doesn´t show correct.
When I tried on my mobile it show correct at all.

Im not sure if I have an alternative in mind at this moment. If I could get some examples or ideas then maybe I could think of something.

Hello,

This is the code I have inserted in the quick css of my child theme:
.custom-tag { padding: 5px; background-color: rgba(0,0,0,0.5); }

@media only screen and (max-width: 1024px) {
.page-id-1176 .av-layout-grid-container, .page-id-1176 .av-layout-grid-container .flex_cell {
display: block;
width: 100%!important;
.av-catalogue-content {
padding-right: 60px;
}

.avia-progress-bar {
margin-bottom: 20px;
}

.progressbar-title {
font-size: 11px;
}

————————

It doesnt work and the code made other things smaller on the website. It made the pictures (packages) on the frontpage smaller :/

• This reply was modified 8 years ago by lech07.

Hi Andy,

If you try to view the page from a mobile or making the browser very thin/responsive you would see that it´s not very nice. With other words, it looks terrible.

View post on imgur.com

thanks alot Andy,

It seems like it works better now and I have shortened as well the text in the progress bar so it wont brake.

I have this css on top of your css, do I need this?
.custom-tag { padding: 5px; background-color: rgba(0,0,0,0.5); }
@media only screen and (max-width: 767px) { .progressbar-title {
font-size: 11px;

All css together looks like this:
.custom-tag { padding: 5px; background-color: rgba(0,0,0,0.5); }
@media only screen and (max-width: 767px) { .progressbar-title {
font-size: 11px;
}}
@media only screen and (max-width: 767px) { .av-catalogue-content p:last-child {
font-size: 11px;
}
.avia_message_box_content {
margin-left: -8px;
margin-right: -8px;
}}

I found a solution to use tabs instead with progressbar but the text dont fit. Is there a solution for this?

View post on imgur.com

• This reply was modified 8 years ago by lech07.

Hi Ismael,

I added the tab element/code inside the “catalogue”
I have tried to make the text smaller as well, some text looks more different. Can you check everything and see if it is correct? thanks.

See below in private content.

doesnt look liek it´s helping me much. Is the code correct inserted?

it doesnt really make a big difference. If i add margin-right: -20px; it doesnt do anything. if i add margin-right: -30px;
then something is happening but it changes the greek progress bar and cutting of it´s corners.

Maybe it would be possible to make a
margin-right: -30px; or margin-right: -35px; and a code to make the corners of the progressbar like they normal are?
Will this work for mobile version too?

I have added the code to functions.php and can see the custom css field.

I have added: .av-catalogue-content { padding-right: 0px; margin-right: -50px; } in custom css field inside the catalogue but there is no difference.

I did the progress bar with code så there is no custom css field.
maybe that´s why the code .av-catalogue-content { padding-right: 0px; margin-right: -50px; } doesn´t work for me?

could you elaborate? what should I do and how should the code look like for the mobile version together with this code?

• This reply was modified 7 years, 11 months ago by lech07.

hello,

Can you see if it is correct?

I have added: .progressbar-price { padding-right: 0px; margin-right: -10px; } @media only screen and (max-width: 989px) and (min-width: 768px) { .progressbar-price { padding-right: 0px; margin-right: -10px; }}

to the custom css class in “catalogue”.

Is this correct and suppose I need to do it for each catalog then?

My quick css looks like below and contain come css for catalog too, do I need to keep this or remove some of it?
.custom-tag {
padding: 5px;
background-color: rgba(0,0,0,0.5);
}

#top .widget_nav_menu {
padding-top: 0;
}

.sidebar_left {
-moz-box-shadow: inset -8px 0 20px -10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset -8px 0 20px -10px rgba(0, 0, 0, 0.2);
box-shadow: inset -8px 0 20px -10px rgba(0, 0, 0, 0.2);
}

.sidebar_left .inner_sidebar {
margin-right: 0 !important;
}

.sidebar_left .widget_nav_menu ul li a {
border: 1px solid #e1e1e1;
border-right: 0;
border-left: 0;
margin: 0 0 -1px;
padding: 12px 16px !important;
text-align: left;
}

.sidebar_left .widget_nav_menu ul li:first-child a {
border-top: 0;
}

@media only screen and (max-width: 767px) {
.progressbar-title {
font-size: 11px;
}
}

@media only screen and (max-width: 767px) {
.av-catalogue-content p:last-child {
font-size: 11px;
}

.avia_message_box_content {
margin-left: -8px;
margin-right: -8px;
}
}
.page-id-3665 #element_avia_17_1 {
width: 100%;
margin-left: 0;
}
.av-catalogue-content {
padding-right: 0px;
}
.avia-testimonial-image {
float: none;
margin: 0 auto 0px auto;
}

View post on imgur.com

• This reply was modified 7 years, 11 months ago by lech07.

i dont know/understand how to do it correct, could I get some assistance with this?

yes i followed the guide and added add_theme_support(‘avia_template_builder_custom_css’);

then the custom css class appeared in the element.

In the custom css class i added: .progressbar-price { padding-right: 0px; margin-right: -10px; } @media only screen and (max-width: 989px) and (min-width: 768px) { .progressbar-price { padding-right: 0px; margin-right: -10px; }}

which i understand from you that it´s wrong.

As i understand i need to give a name in the custom css like progress-bar?
And in the quick css I use the class:

.progrees-bar {
padding-right: 0px;
margin-right: -10px;
}
@media only screen and (max-width: 989px) and (min-width: 768px) {
.progress-bar- {
padding-right: 0px;
margin-right: -10px;
}}

is this correct?

great, so far so good.

I dont understand regarding typo, can you clarify?

is the code ok now? and what do I need to do next, how can i test this to see if it really works?

ok. I have removed the “-” from .progress-bar-. so it looks like: .progress-bar
in quick css.

Is this correct now?

I can´t see any difference though.

My code likes this:

.lch-progrees-bar {
padding-right: 0px;
margin-right: -0px;
}
@media only screen and (max-width: 989px) and (min-width: 768px) {
.lch-progress-bar {
padding-right: 0px;
margin-right: -50px;
}}
@media only screen and (max-width: 767px) {
.avia_textblock {
line-height: 37px;
}
h1 {
line-height: 60px;
}}