Highlighted

Window Resizing Issues, <divs>(?) not readjusting properly

New Here ,
Jul 18, 2018

Copy link to clipboard

Copied

Hi everyone.

I am fairly new to coding, especially in Dreamweaver.. So hopefully some of you can help. I am looking to figure out why I have such inconsistent spacing and resizing within sections of my site. I know my question probably isn't making much sense, so I have included some screenshots of various window sizes to show what I am talking about - I am sure you can notice right away what I am trying to fix.

Any help is greatly appreciated. I can attach css code screenshots also if it is necessary.

Screen Shot 2018-07-18 at 10.23.09 AM.pngScreen Shot 2018-07-18 at 10.23.21 AM.pngScreen Shot 2018-07-18 at 10.23.34 AM.png

clayduffy  wrote

Thank you so much for your time and effort on this. It is very much appreciated.

Am I just placing this in the source code now?

So essentially your basic code structure would be as below then you can populate the 2 areas with what code you want and the column gap between them will stay the same:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Untitled Document</title>

<style>

.section_content {

display: flex;

justify-content: space-between;

width: 90%;

margin: 0 auto;

}

.portfolio_gallery_area {

width: 45%;

border: 1px solid #ccc;

}

.summary_area_2 {

width: 50%;

border: 1px solid #ccc;

}

</style>

</head>

<body>

<div class="section_content">

<div class="portfolio_gallery_area">

GALLERY IMAGES CODE GOES HERE

</div>

<!-- portfolio_gallery_area -->

<div class="summary_area_2">

TEXT GOES HERE

</div>

<!-- summary_area_2 -->

</div>

<!-- section_content -->

</body>

</html>

TOPICS
Learn Dreamweaver

Views

236

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Window Resizing Issues, <divs>(?) not readjusting properly

New Here ,
Jul 18, 2018

Copy link to clipboard

Copied

Hi everyone.

I am fairly new to coding, especially in Dreamweaver.. So hopefully some of you can help. I am looking to figure out why I have such inconsistent spacing and resizing within sections of my site. I know my question probably isn't making much sense, so I have included some screenshots of various window sizes to show what I am talking about - I am sure you can notice right away what I am trying to fix.

Any help is greatly appreciated. I can attach css code screenshots also if it is necessary.

Screen Shot 2018-07-18 at 10.23.09 AM.pngScreen Shot 2018-07-18 at 10.23.21 AM.pngScreen Shot 2018-07-18 at 10.23.34 AM.png

clayduffy  wrote

Thank you so much for your time and effort on this. It is very much appreciated.

Am I just placing this in the source code now?

So essentially your basic code structure would be as below then you can populate the 2 areas with what code you want and the column gap between them will stay the same:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Untitled Document</title>

<style>

.section_content {

display: flex;

justify-content: space-between;

width: 90%;

margin: 0 auto;

}

.portfolio_gallery_area {

width: 45%;

border: 1px solid #ccc;

}

.summary_area_2 {

width: 50%;

border: 1px solid #ccc;

}

</style>

</head>

<body>

<div class="section_content">

<div class="portfolio_gallery_area">

GALLERY IMAGES CODE GOES HERE

</div>

<!-- portfolio_gallery_area -->

<div class="summary_area_2">

TEXT GOES HERE

</div>

<!-- summary_area_2 -->

</div>

<!-- section_content -->

</body>

</html>

TOPICS
Learn Dreamweaver

Views

237

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 18, 2018 0
LEGEND ,
Jul 18, 2018

Copy link to clipboard

Copied

clayduffy  wrote

Hi everyone.

I am fairly new to coding, especially in Dreamweaver.. So hopefully some of you can help. I am looking to figure out why I have such inconsistent spacing and resizing within sections of my site. I know my question probably isn't making much sense, so I have included some screenshots of various window sizes to show what I am talking about - I am sure you can notice right away what I am trying to fix.

Any help is greatly appreciated. I can attach css code screenshots also if it is necessary.

You'll have to provide the page code and css for anyone to be able to help you.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0
New Here ,
Jul 18, 2018

Copy link to clipboard

Copied

Here is the Source code:

Screen Shot 2018-07-18 at 10.45.33 AM.png

Here is the css code of the summary area on the right:

Screen Shot 2018-07-18 at 10.42.29 AM.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0
LEGEND ,
Jul 18, 2018

Copy link to clipboard

Copied

I see padding left 695px on your 'summary_area_2'????.....that wont help.

It's best structure to keep your 2 sections inside the 'section_content' seperate:

<div class="section_content">

<div class="portfolio_gallery_area">

GALLERY IMAGES CODE GOES HERE

</div>

<!-- portfolio_gallery_area -->

<div class="summary_area_2">

TEXT GOES HERE

</div>

<!-- summary_area_2 -->

</div>

<!-- section_content -->

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 1
New Here ,
Jul 18, 2018

Copy link to clipboard

Copied

Thank you so much for your time and effort on this. It is very much appreciated.

Am I just placing this in the source code now?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0
LEGEND ,
Jul 18, 2018

Copy link to clipboard

Copied

clayduffy  wrote

Thank you so much for your time and effort on this. It is very much appreciated.

Am I just placing this in the source code now?

So essentially your basic code structure would be as below then you can populate the 2 areas with what code you want and the column gap between them will stay the same:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Untitled Document</title>

<style>

.section_content {

display: flex;

justify-content: space-between;

width: 90%;

margin: 0 auto;

}

.portfolio_gallery_area {

width: 45%;

border: 1px solid #ccc;

}

.summary_area_2 {

width: 50%;

border: 1px solid #ccc;

}

</style>

</head>

<body>

<div class="section_content">

<div class="portfolio_gallery_area">

GALLERY IMAGES CODE GOES HERE

</div>

<!-- portfolio_gallery_area -->

<div class="summary_area_2">

TEXT GOES HERE

</div>

<!-- summary_area_2 -->

</div>

<!-- section_content -->

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0
New Here ,
Jul 18, 2018

Copy link to clipboard

Copied

Here is my exact source code for the "Exhibits" section I am having problems with:http://valleyexpodisplays.com/proposals/proposal_rebuild/proposal.html

<div id="Exhibits">

  <div class="section_title">

<h2>Exhibits</h2>

  </div>

  <div class="section_content">

<div class="portfolio_gallery_area">

<div class="portfolio_gallery_gr">

<h3>Association / Show Management</h3>

        <div class="flexslider portfolio_gallery">

          <ul class="slides">

            <li> <img src="../proposal_images/portfolio/show/20141118_100011.jpg" /></li>

            <li> <img src="../proposal_images/portfolio/show/DSC00300.jpg" /></li>

            <li> <img src="../proposal_images/portfolio/show/DSCF1144.jpg" /></li>

            <li> <img src="../proposal_images/portfolio/show/IMG_1349.jpg" /></li>

            <li> <img src="../proposal_images/portfolio/show/Chicago Entrance.jpg" /></li>

            <li> <img src="../proposal_images/portfolio/show/IMG_1355.jpg" /></li>

            <li> <img src="../proposal_images/portfolio/show/Chicago Grand Concourse.jpg" /></li>

            <li> <img src="../proposal_images/portfolio/show/IMG_1415.jpg" /></li>

           

            <li> <img src="../proposal_images/portfolio/show/IMG_3144-3146.jpg" /></li>

           

            <li> <img src="../proposal_images/portfolio/show/IMG_3271.jpg" /></li>

           

            <li> <img src="../proposal_images/portfolio/show/Grand Concourse.jpg" /></li>

            <li> <img src="../proposal_images/portfolio/show/IMG_4874.jpg" /></li>

            <li> <img src="../proposal_images/portfolio/show/IMG_7893.jpg" /></li>

            <li> <img src="../proposal_images/portfolio/show/BBI Reg.jpg" /></li>

           

            <li> <img src="../proposal_images/portfolio/show/Chicago Floor.jpg" /></li>

           

            <li> <img src="../proposal_images/portfolio/show/Chicago Lower Entrance.jpg" /></li>

           

            <li> <img src="../proposal_images/portfolio/show/Merch copy.jpg" /></li>

          </ul>

        </div>

</div>

<!-- portfolio_gallery_area -->

<div class="summary_area_2">

<h1 class="smallcaps text_center">VALLEY'S  "Active Communication Experience"</h1>

      <p>There are four main components to our Active Communication Experience: Listen, Collaborate, Perform, and Report. These pieces combine to form a Continuous Loop Process; once we engage, the process does not end—it only builds momentum, creating scalable historical knowledge that ties together your current event to all upcoming events. This provides continuity for you even when individuals come and go from your organization, or change event responsibilities, at any point in the process. </p>

      <p>The Active Communication Experience is not new to Valley; it is not an experiment for just a few events. It is an established process that has been perfected over the last 42 years. During that time, we have become skilled at marrying previous events, from other general service contractors, into current events, as well as understanding and translating all previous historical information, removing the concern of “starting from scratch”. </p>

      <p>Here at Valley, we strive to be your best vendor and partner. Through each step of the process, we are listening, collaborating, performing, and reporting. That’s what the ActiveCommunication Experience is all about. We keep our lines of communication open, guaranteeing transparency throughout our relationship.</p>

      <p> To learn more about Valley's "Active Communication Experience" <a href="../proposal_download/valley_ace_system.pdf">download the pdf brochure.</a></p>

</div>

<!-- summary_area_2 -->

</div>

<!-- section_content -->

</body>

  </div>

</div>

---------------------------------------------------------------

And here is how it is appearing:

Screen Shot 2018-07-18 at 11.45.09 AM.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0
New Here ,
Jul 18, 2018

Copy link to clipboard

Copied

I am sure these are really dumb questions, so I am very sorry for that. Like I said, I am incredibly new to this and trying to make changes on a site I didn't code to begin with. I appreciate your help so much. Sorry if this is frustrating

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0
osgood_ LATEST
LEGEND ,
Jul 18, 2018

Copy link to clipboard

Copied

clayduffy  wrote

I appreciate your help so much. Sorry if this is frustrating

No more frustrating or dumb than me trying to learn/understand something I don't know..........of which there are many many many! Happy days!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0