1

I have this div:

enter image description here

I need to make it this:

enter image description here

I try to do it with txt file, that I load in CEWP, txt file looks like this:

<style type="text/css">
.ms-webpart-zone ms-fullWidth
{
     width: 700px;
}
</style>

But it does not work. How to do it right?

  • Strange but none of the four methods worked in my case oO. Maybe because of CEWP.. I'll try now in Designer – Gennady G Mar 12 '15 at 14:49
  • At the end I modified parent table style, right click in Firebug-> Copy CSS path, and my result CSS became: html body.ms-backgroundImage form#aspnetForm div#s4-workspace.ms-core-overlay div#s4-bodyContainer div#contentRow div#contentBox div#DeltaPlaceHolderMain div.welcome.welcome-links table { width:70%; !important } – Gennady G Mar 12 '15 at 19:58
2

Add the css as:

<style type="text/css">
    div.ms-webpart-zone.ms-fullWidth {
        width: 700px;
    }
</style>

Note: This change will apply to all your webpart zone(s) in the page. To apply it to a particular element prepend the CSS with a unique element identifier.

  • Yes thanks! It works, for both webpartzones in table, so they move both relative to each other :-D So my 'adventures' continue) – Gennady G Mar 12 '15 at 19:26
1

Your css is not correct, you are looking for an element with the class ms-webpart-zonethat has a child element with the class ms-fullWidth which is not the case in the markup you show.

Try this:

<style type="text/css">
.ms-webpart-zone.ms-fullWidth
{
     width: 700px;
}
</style>

Or, to be compliant with all browsers (some do not like to combine two classes like I do above):

<style type="text/css">
.ms-fullWidth
{
     width: 700px;
}
</style>

or

<style type="text/css">
.ms-webpart-zone
{
     width: 700px;
}
</style>

You will have to check yourself which one of the two latest variants that works the best on your specific page.

  • By "compliant with all browsers" are you referring to <= IE6? – eirikb Mar 12 '15 at 20:27
  • I just know I have hade troubles with this in some browser / OS combination, might have been IE8 on windows 7 or similar :) – Robert Lindgren Mar 12 '15 at 20:48
1

If you can use JavaScript, you can try using this jQuery in your CEWP. It will inject CSS as an inline style for the specified element:

<script src="/link-to-your-jquery-file/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function(){

        $('div.ms-webpart-zone.ms-fullWidth').css('width', '700px');

    });

 </script>
  • 1
    Why would you use jquery to do something that can easily be done with pure css? – Robert Lindgren Mar 12 '15 at 20:11
  • I proposed it because the question asked for a solution that would provide an inline style for the element, which this jQuery does. – clk Mar 12 '15 at 20:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.