blog1
October 20, 2016, 8:34am
1
I have a problem with CSS. Please for assistance. Yelim to me the picture is positioned at the center of the page and not the left or the right. I want to be on cebtru regardless of screen resolution. This is the code in CSS
/ * Product * /
.product-info {overflow: auto; margin-bottom: 20px; }
.product-info> .right {float: left; }
.product-info> + .left .right {margin-left: 255px; }
.product-info> .right {position: relative}
.product info h1 {margin-bottom: 0px; background: none;}
.product info .image {box-shadow: 0px 0px 3px # CCC 0px 0px 0px 1px white inset; background: # F6EEF2; float: left; margin: 5px 0px 5px 1px; padding: 2px 2px 2px 2px; text-align: center; -webkit-transition: all 0.3s ease-and-out; -moz-transition: all 0.3s ease-and-out; -o-transition: all 0.3s ease-and-out; -ms-transition: all 0.3s ease-and-out; transition: all 0.3s ease-and-out;}
.product info .image_inside {}
.product-info # zoom-image {text-align: center; display: block; margin: 10px 0 0; font-size: 10px; text-transform: uppercase; color: # 333;}
.icon-zoomin {text-decoration: none! important; height: 14px; width: 14px; background: transparent url ( '../ image / zoom-icon.png') no-repeat; display: inline-block; vertical-align: text-top}
.product-info-.image additional {width: 285px; clear: both; overflow: hidden; }
.product-info-.image additional a: hover {}
.product info .image additional-a {float: left; display: block; margin: 10px 10px 2px 2px; padding: 0px; display: block; -webkit-transition: all 0.3s ease-and-out; -moz-transition: all 0.3s ease-and-out; -o-transition: all 0.3s ease-and-out; -ms-transition: all 0.3s ease-and-out; transition: all 0.3s ease-and-out; box-shadow: 0px 0px 3px # CCC, 1px 1px 1px white inset; background: # f8f8f8; }
This is a link to the product appearance
http://www.netclickshop.com/index.php?route=product/product&product_id=6889
Thanks
PaulOB
October 20, 2016, 9:29am
2
I’m not sure what ‘Yelim’ or ‘cebtru’ means but I’m guessing you want that block centred?
If so add this code after the original styles and see if that’s what you meant.
.product-info {
display:table;
margin:auto;
}
.product-info .right, .product-info .left {
display:table-cell;
vertical-align:top;
float:none;
}
@media screen and (max-width:760px) {
.product-info .right, .product-info .left {
display:block;
}
.product-info .image {
float:none;
display:block;
margin:auto;
}
.product-info .image img {
display:block;
margin:auto;
width:100%;
height:auto
}
}
Note you have an awful lot of work to do to make this fully responsive as things overlap everywhere at smaller screen sizes.
2 Likes
…and this…
114 errors and 141 warnings found while checking this document as XHTML 1.0 Strict!
…of course, does nothing for the cause.
I can remember a time when it was common practise,in forums,
not to offer any further assistance until the O.P. had, at least,
made a concerted effort to correct all the coding errors.
coothead
1 Like
PaulOB
October 20, 2016, 10:12am
4
coothead:
I can remember a time when it was common practise,in forums,
not to offer any further assistance until the O.P. had, at least,
made a concerted effort to correct the all the coding errors.
Where’s the fun in that
Of course you are correct and any one of the errors could be a major problem and should be looked at first.
1 Like
blog1
October 20, 2016, 10:34am
5
OK. Thanks a lot. I’ll try.
ronpat
October 20, 2016, 2:02pm
6
I noticed that your local stylesheet is not the last stylesheet in the head of your page. It’s fairly near the top, in fact. It should be the last stylesheet in the cascade so you can follow @PaulOB ’s advice and locate his changes after all of the other preceeding it. That’s just standard practice.
2 Likes
system
Closed
January 19, 2017, 9:02pm
7
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.