Someone made my theme responsive and it seems to be ok except for one little thing on the French version the text in the Add to cart button is a little longer then the English one so it goes under instead of staying on the right as you can see in the picture.
I tried to change the width in the original stylesheet but it didn't work so I believe it need to be change in the style.css for the responsiveness but I have no idea what I need to change and I don't want to mess the result on mobile view so if anyone know what I need to change and would be kind enough to help me I would really appreciate it.
This is the part of the original stylesheet in which I tried to change the width of the table with no luck:
Code: Select all
#table-produto {
width: 100%;
border-bottom: 1px solid #9F7F4C;
margin-bottom: 10px;
}
#table-produto_left{
width: 200px;
padding-left: 15px;
}
#table-produto_right {
width: 345px;
}Code: Select all
#table-produto { overflow: auto; }
#table-produto > div { float: left; }
#currency b.hm { font-weight: normal;}
#header { z-index: 99999;}
.slicknav_btn { background-color: #960000 !important; }
.links .slicknav_menu { text-align: center;}
.slicknav_nav li div { margin-left: 20px; color: #eee; }
.slicknav_nav li div ul div { display: none;}
#top_inner-inner {padding-top: 8px; }
#base { min-width: 600px; }
.scroll-table {overflow: auto; clear: both;}
.buttons.show-mob { display: none; }
#content.voucher .content { border: none;}
@media screen and (max-width: 1980px) {
#table-produto_right { width: 362px;}
}
@media screen and (max-width: 1300px) {
#table-produto_right { width: 345px;}
}
@media screen and (max-width: 1060px) {
.horizontalcssmenu {
width: 595px;
}
#header .links { width: 595px;}
.menu-links {width: 595px;}
#menu .slicknav_menu { display: block; }
#menu > ul {display: none;}
img {max-width: 100%; height: auto;}
#base_inner-inner { display: none; }
#table-produto_right { width: 162px;}
.htabs { height: auto;}
.htabs a { float: none; display: inline-block !important;}
input.large-field, select.large-field { width: 200px; }
}
@media screen and (max-width: 917px) {
#header #logo a img {
width: 285px;
height: auto;
}
#header #logo {
top: 70px;
}
#table-produto_right { width: auto; float: none;}
}
@media screen and (min-width: 768px) {
#column-left, #column-right { display: block !important; }
}
Cleo
