Joomla Templates Club 406,261 posts

[yangyangli Friend yangyangliJoin date: July 2014Posts: 72Downloads:0Uploads:39 Thanks: 22 Thanked: 12 times in 1 posts]

#199501

The problem is quite perplexing and there might not be a solution, but hopefully there is. 😮
For some reason, at a browser window dimension of 1280×704, give or take 200 pixels, the text overflows out of the container.

The resizing does work perfectly at other dimensions such as 997×549.

The behavior lead me to believe that a problem exists in the way the container is handled by @media, an area of code I do not currently possess the skills to troubleshoot.

The situation appeared dire, until I saw this glimpse of hope.
https://www.youtube.com/watch?v=B_FMJT6pDco&feature=youtu.be
0:02-0:04 Resizing window
0:04-0:05 Text Resizes
0:05-0:06 Text Overflow Error
Hmmmmm… :confused:

---

Attachments:

1. 
2. 

[yangyangli Friend yangyangliJoin date: July 2014Posts: 72Downloads:0Uploads:39 Thanks: 22 Thanked: 12 times in 1 posts]

#541458

I took another shot at fixing the problem myself once I got home. On my home computer with a QHD monitor (2560×1440), the website looks like this:

The picture I used to replace the default does not automatically resize. All I did was copy over the default so I don’t know what might be causing me issues.

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#541515

Did you solve this bug? I see it’s working fine on your site but you have to a little bit change in the css style

Open templates/ja_sugite/css/custom.css file and add new rule

.updown.active .ja-ss-desc {
padding-left: 10px;
padding-right: 10px
}

[yangyangli Friend yangyangliJoin date: July 2014Posts: 72Downloads:0Uploads:39 Thanks: 22 Thanked: 12 times in 1 posts]

#541620

@ninja Lead
Unfortunately, adding your text did not solve the issue, the problem still exists. The point I was trying to make in post #2 is that the issue only manifests within certain browser dimensions. For now, I’ve narrowed down the problem to a browser width of <700 if that helps.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#541654

Image dimension in post #2 is showing full but it still narrowed down, you try to fix it with css style below into custom.css file

.updown.active .ja-ss-sprite.first {
top: 18%;
}

[yangyangli Friend yangyangliJoin date: July 2014Posts: 72Downloads:0Uploads:39 Thanks: 22 Thanked: 12 times in 1 posts]

#541742

<em>@Ninja Lead 435840 wrote:</em><blockquote>Image dimension in post #2 is showing full but it still narrowed down, you try to fix it with css style below into custom.css file

.updown.active .ja-ss-sprite.first {
top: 18%;
}
</blockquote>

The code did not solve the issue.

Please read the OP and watch the video I provided to understand the nature of the problem.

---

Attachments:

1. 

[yangyangli Friend yangyangliJoin date: July 2014Posts: 72Downloads:0Uploads:39 Thanks: 22 Thanked: 12 times in 1 posts]

#541745

Also, could you tell me how to fix the image not resizing according to browser dimensions? In the demo, the image resized accordingly. See Post #:2 for image with annotation. Thanks!

[yangyangli Friend yangyangliJoin date: July 2014Posts: 72Downloads:0Uploads:39 Thanks: 22 Thanked: 12 times in 1 posts]

#541779

I fixed the bug myself. As I suspected, the issue was a result of misconfiguration of @media.
Looking back on my OP statement, it seems I under estimated myself.
<blockquote>The behavior lead me to believe that a problem exists in the way the container is handled by @media, an area of code I do not currently possess the skills to troubleshoot.</blockquote>

I would have arrived at the solution much sooner if I was modifying the correct files. However, instead of editing mod_jaslideshowlite_custom.css, I was editing mod_jaslideshowlite.css.
Adjusting the font size in the following segment of code solved the issue.

@media (min-width: 1200px) {
.ja-ss-desc {
font-size: 18px;
}
}
.ja-ss-desc h3 {
font-size: 34px;
font-weight: 300;
line-height: 1.7;
color: #ffffff
} @media (min-width: 1200px) {
.ja-ss-desc h3 {
font-size: 34px;
}
}
.ja-ss-desc .btn {
margin-top: 0;
} @media (min-width: 1200px) {
.ja-ss-desc .btn {
margin-top: 14px;
}

:p:p:p:p:p:p:p:p:p

1 user says Thank You to yangyangli for this useful post

1. TomC

[Author]

Posts