Long post title , gone too wide out of screen

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.spb_single_image.span12  img.attachment-full{
width:100% !important;
}

Thanks
Mohammad

[ballisticone]

it’s perfect ! thank you so much for the great support.

[David Martin – Support]

Glad to hear your issues are sorted, thanks Mohammad!

– David.

[ballisticone]

hey guys,

even though it’s solved , but it doesnt seem to be perfect.
it make the max wide of feature image & full wide of blog images are different .

see file attached for more information,
the max width of all images should be the same width , not just like that.

here’s the code i have in custom code.

.spb_single_image.span12  img.attachment-full{
width:100% !important;
}
.single-post figure.media-wrap.full-width-detail{
margin-left:0px !important;
}
.single-post .spb_single_image img{width:95% !important;}

.page-heading h1{white-space:pre-wrap !important;}

#product-img-slider .lSSlideWrapper {
    box-shadow: none !important;
}

.woocommerce div.product .entry-title {display: none !important;}

}

figure .overlay {
  background-color: #FFFFFF!important;
}
figure:hover .overlay {
  box-shadow: inset 0 0 0 500px #FFFFFF!important;
}
.fa-file-o:before {
 display:none;
}
.overlay .thumb-info i{display:none !important;}

.product-navigation{display:none !important;}

#product-img-slider { box-shadow: none !important;}

span.posted_in{display:none !important;}

.full-width-text {
  padding-bottom: 10px;
  padding-top: 10px;
}

#header-subscribe {
  width: 250px;
}
#mc-embedded-subscribe.button {
  margin-top: 10px;
}

nav#main-navigation .menu > li.menu-item-12768 > a {
    color: #ff0000 !important;
}

.spb_single_image figure .thumb-info, .spb_single_image figure:hover > a > .overlay{
display:none;
}

.product-carousel .posted_in { display: none; }

.single-post .inner-page-wrap{
margin-top:0px!important;
}

.woocommerce-checkout .continue-shopping { display: none; }
.woocommerce-checkout .my-account-right { width: 100%; }

.sidebar-widget-wrap .title-wrap, .sidebar .widget-heading h4 {
margin-bottom: 0px!important;
}

.woocommerce ul.products li.product figure {
  box-shadow: none!important;
}

@media only screen and (min-width: 768px) { 
/* IMAGE AREA */
.woocommerce div.product div.images {
width: 65%;
}
/* DETAILS AREA */
.woocommerce div.product div.summary {
width: 32%;
}

}

#product-accordion, .product_meta {
  display: none;
}

ul.products li.product .price {
  float: left;
  width: 100%;
  margin-top: 5px;
}
#product-accordion {
  display: none;
}
#breadcrumbs {
  box-shadow: none;
}

.woocommerce div.product .entry-title {
  display: block;
  margin-bottom: 10px;
}

.woocommerce .cart_totals table tr.shipping td {
  width: 40%;
}

.woocommerce .order_details li, .woocommerce-page .order_details li { font-size: 1.2em; }

.woocommerce-checkout .my-account-left { display: none; }

ul.products li.product .price {
  font-size: 12px;
}

.woocommerce ul.products li.product figure {
  box-shadow: none;
}

.product-details .posted_in > a {
  display: none;
}

li.product figcaption .shop-actions {
  display: none;
}

.single-post figure.media-wrap.full-width-detail{text-align:center !important;}
.single-post figure.media-wrap img { height: auto !important;width: auto !important;}

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
I need specific page url with issue to check.
Thanks
Mohammad

[ballisticone]

This reply has been marked as private.

[David Martin – Support]

Hi,

These issues seem to be because of your custom code.

Issue One:

http://www.sneakavilla.net/recap-adidas-yeezy-boost-350-black-drop-in-bangkok/

Delete:

.single-post figure.media-wrap.full-width-detail {
    margin-left: 0px !important;
}

Issue Two:

I do not see any misaligned elements here:

http://www.sneakavilla.net/closer-look-on-feet-supreme-x-air-jordan-5/

Issue Three:

Same as issue 1, remove this

.single-post figure.media-wrap.full-width-detail {
    margin-left: 0px !important;
}

Thanks.

[ballisticone]

This reply has been marked as private.

[David Martin – Support]

Hi,

Issue One: I do not see this issue, what browser or device are you on?

Issue Two: This is because of you custom CSS, please remove this:

.single-post .spb_single_image img {
    width: 95% !important;
}

Thanks.

[ballisticone]

This reply has been marked as private.

[David Martin – Support]

Do you mean this question?

2. i try using the layout , row . i create 1/2 + 1/2 and insert images in both side,
once i update , both images has no gap between,

I am struggling to understand what you want exactly. Let me know and I’ll happily help you.

Thanks,
David.

[ballisticone]

Yes, exactly David.

please take a look at this post.
http://www.sneakavilla.net/bibo-restaurant-in-hong-kong/
scroll down to bottom , you will see what i mean.

I use layout you provide and add image block inside .
it supposed to be some gap between those 2 images. but it wasn’t

Thanks.

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Please add this css, that should sort it:

.spb-column-container > .spb-asset-content > .container > .row, .spb-column-container > .spb-asset-content > .fw-row > .container > .row {
	margin-left: 0;
}
.spb-column-container > .spb-asset-content > .container > .row > [class*="span"]:first-child, .spb-column-container > .spb-asset-content > .fw-row > .container > .row > [class*="span"]:first-child {
	margin-left: 0;
}

– Ed

[ballisticone]

This reply has been marked as private.

[David Martin – Support]

Hi,

To resolve that, please use this CSS:

.single-post figure.media-wrap.full-width-detail {
    margin: 0 auto 40px auto;
}

Thanks,
David.