Resizing elements in popout window

[dloss]

I’m new to working with CSS (I’ve been involved in backend administration for many years, but have to update some web content that was handed to me) and could use some guidance. We have a webpage where, when a link is clicked on a new web page pops out over the original page. Here is a screen shot of an example:

https://screenshots.firefox.com/hSYTylu2LduVW5o1/null

What I would like to do is to increase the amount of space that’s being used in the white section of this screenshot and decrease the amount used by the purple section. The white section is the event-info section in this stylesheet:

https://codepen.io/dloss/pen/yzxbym

I don’t know where to modify this code to get the effect I need. Oh, the main page using this stylesheet includes these Javascript settings:

<!-- .cd-schedule -->
<a href="http://js/modernizr.js">http://js/modernizr.js</a>
<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js</a>

    if (!window.jQuery) document.write('');

<a href="http://js/main.js">http://js/main.js</a>
<!-- Resource jQuery -->

I’d appreciate any guidance anyone could give, just pointing me at the section that needs addressing. Thanks!

[Paulie_D]

Unfortunately, the Codepen you provided does not demostrate the issue and the Jabascript/Jquery isn’t apparently relevant.

It appears from the screenshot that the page has two element each taking 50% of the width. You’have to review the HTML and the associates CSS to see what those elements are and where and how the widths are defined.

Then you can tweak the values to see what you can get.

[dloss]

Thank you Paulie_D. I’m a bit confused: the Codepen has the entire style.css stylesheet in use, as well as the HTML used to generate the popout window. The HTML that calls the popout is here (just an excerpt of it, to illustrate the classes used):

https://codepen.io/dloss/pen/ZXMyaa

So far as I can see the widths aren’t defined anywhere in the HTML, which is why I figured they were generated in the CSS somehow. The event-modal sections seemed likely to be where it’s defined, but I can’t see where that’s being done in those sections. Is there anywhere else I can look?

[Author]

Posts