Jump to content

Archived

This topic is now archived and is closed to further replies.

Ryan Logan

Extend Column Color To Edge Of Screen

Recommended Posts

Ryan Logan

Site:  fnacorp.flywheelsites.com

 

Is there a way to do this without maxing out the margins?  I need the left to have a White background and the right to have the off-white background.  See here.

 

Thank you,

Ryan

 

 

Share this post


Link to post
Share on other sites
Danny

Hi Ryan,

 

You will need to make the canvas area that is housing those sections to be full width, i.e. increase the max-width to 100%.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Guest

I thought Canvas Areas are max-width already and then you have the scalable overall width of the site.?  I don't see how the color would extend out all the way, without sliding the overall width all the way to the edge.  In any event, here is what I've tried to no avail.

 

#pl_areau6ww4k3 { max-width:100%; }

#pl_areau6ww4k3 { max-width:100% !important; }

 

Thanks!

Share this post


Link to post
Share on other sites
Danny

Use the following code:

 

#pl_areau6ww4k3 .pl-content {
  max-width: 100%;
}
 
Then you're going to need to go to each individual TextBox as you appear to be using two for each column and then add padding to them to add spacing for the text.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Guest

Appreciate both of your answers.  I'm good to go now.  Thank you.

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Guest

Hello.  I can open a new post if need be, but thought this was close enough to what we're talking about.  Same site, same page.  I need to do the same thing with the column, but this time I need to make it max width vertically.  I thought I could simply add max-height to the CSS you game me for the other issue.  It doesn't seem to make a difference.

 

/* Extends the color of the Why We're Different section all the way to the edge */ 
#pl_areau6ww4k3 .pl-content {
  max-width: 100%;
  max-height: 100%;
}

 

Screenshot

Share this post


Link to post
Share on other sites
Aires
Greetings,
This can be accomplished by using viewport css like so

.custom-class {
height: 100vh; }

Add the class to the column and the height will adjust to the height of the device.


Sent from my iPhone using Tapatalk

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Guest

Thanks.  Same thing.

 

  • Laptop (Firefox):  Everything looks great
  • Laptop (Chrome):  Issue persists
  • iPad - Portrait and Landscape (Safari):  Issue persists
  • iPad - Portrait and Landscape (Chrome):  Issue persists
  • iPhone - Everything looks great in any browser and any mode

Share this post


Link to post
Share on other sites
Aires
I may have given you the wrong css
Max-height: 100vh;


Sent from my iPhone using Tapatalk

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Guest

No dice.  Tried:

 

.maxcolumnheight {
max-height: 100vh !important; 
}
 
and
 
.maxcolumnheight {
max-height: 100vh; 
}

Share this post


Link to post
Share on other sites
dario

For me, using Chrome (Windows 7), the fill goes all the way down.

Same with Explorer 11.

 

Maybe what I found was the old site?

Share this post


Link to post
Share on other sites
Guest

Yep, wrong site.  Here is the correct one.

 

fnacorp.flywheelsites.com

Share this post


Link to post
Share on other sites
dario

Fixed now, no?

 

Share this post


Link to post
Share on other sites
Guest

No.

 

  • Laptop/Desktop (Firefox):  Everything looks great
  • Laptop/Desktop (IE):  Everything looks great
  • Laptop/Desktop (Chrome):  Issue persists
  • iPad - Portrait and Landscape (Safari):  Issue persists
  • iPad - Portrait and Landscape (Chrome):  Issue persists
  • iPhone - Everything looks great in any browser and any mode

Share this post


Link to post
Share on other sites
dario

My last screenshot was from Chrome on a PC.

However, I can see that on the iPad the mustard color is lower than the white.

 

If you remove the height declaration from this styling it resolves the problem on the iPad (seen via Chrome Dev Tools / device iPad 3/4) and on Chrome PC.

#plcolumnuecbf5 {
  background-color: rgba(208,157,3,1);
  /* height: 280px; */
}

Commented out.

Share this post


Link to post
Share on other sites
Guest

Thank you, but that made things way worse.  I changed it from 280px to 100% and that has me 99% of the way there.  Ipad (Portrait Mode) is the only issue, as the Orange does not match up like other device/browsers/etc.

 

I would love to figure this out, but honestly...I can live with this.  Happy to try other ideas.

 

Ryan

Share this post


Link to post
Share on other sites
Danny

Your issue is because the elements are floats. When the children elements are floated, they are taken out of the flow of the document. In doing so, the parent no longer has defined dimensions, as the children aren't technically occupying space.

 

Try the following:

 

#plcolumnuecbf5 {
  background-color: rgba(208,157,3,1);
  height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
}
@media (max-width: 767px) {
#plcolumnuecbf5 {
  position: relative !important;
 }
}
#plcolumnuecbf5 .pl-section-pad {
  margin-bottom: 0;
}
 
 

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×