Solved

CSS, undesired line break

Posted on 2014-07-28
10
173 Views
Last Modified: 2014-10-10
Please take a look at www.prowodev.com/links/q.html. You'll notice in the top left corner, there is a ticker that changes every few seconds. If you refresh the page and look closely at the ticker, you'll see that when that when the first one slides to the right, it breaks into two lines. It seems to only happen the first time; when it comes around again, it doesn't happen. You have to look closely to catch it. I've attached a screenshot to show you what it looks like. Any thoughts as to why this is happening? I've tried adding an explicit width (700px) but that didn't help. Thanks in advance for your help!
0
Comment
Question by:isaacr25
  • 5
  • 4
10 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40225300
Not sure as there is some js setting the width initially, you could add this to override it, unless I can find the js responsible

#views_slideshow_cycle_teaser_section_top_ticker-block {
    width:100% !important
}
0
 

Author Comment

by:isaacr25
ID: 40225338
That seems to have done the trick! Thanks!
0
 

Author Comment

by:isaacr25
ID: 40227403
I think I spoke too early... Is there any way to re-open this question? The line break is still happening when the ticker gets to it's right-most point (again, only on the first time). You have to refresh to see it happen each time. Can this question be re-opened?
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 58

Expert Comment

by:Gary
ID: 40227421
Add

.views-slideshow-cycle-main-frame.views_slideshow_cycle_teaser_section > div {
    width: 100% !important;
}

Open in new window

0
 

Author Comment

by:isaacr25
ID: 40227806
Ok. That seemed to break a lot of other alignments terribly. I had to back out the code, but here is a link to a screenshot of the results: www.prowodev.com/links/image001.png.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40227818
Ok more specifity

#views_slideshow_cycle_teaser_section_top_ticker-block > div {
    width: 100% !important;
}

Open in new window

0
 

Author Comment

by:isaacr25
ID: 40229399
To make sure I'm doing the right thing, do I add that along with the previous code? So do I add both:

#views_slideshow_cycle_teaser_section_top_ticker-block > div {
    width: 100% !important;
}

Open in new window


AND

.views-slideshow-cycle-main-frame.views_slideshow_cycle_teaser_section > div {
    width: 100% !important;
}

Open in new window

0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40229406
No don't use
.views-slideshow-cycle-main-frame.views_slideshow_cycle_teaser_section > div {
    width: 100% !important;
}


The new one is more specific to the ticker box.
0
 

Author Comment

by:isaacr25
ID: 40229508
Ok, so I'm adding ONLY the following. Stay tuned. Thanks.

#views_slideshow_cycle_teaser_section_top_ticker-block > div {width: 100% !important;}

Open in new window

0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will learn how to dynamically set the form action using jQuery.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question