Tagged: ,

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • April 19, 2017 at 6:02 am #779775
    ccyran

    Hey guys,

    Is there a quick CSS I can use so that all my body copy has a max width of 600px?

    Im thinking that I want to use the stretched layout on my site, but I don’t like how it makes the width of the text very very long if the browser is large.

    Thank you,
    Chris

    website: ccyran.com

    April 19, 2017 at 10:13 am #779863
    Rikard

    Hey Chris,

    The container width should be the same even if you are viewing the site on a wide screen. You can set the width under Enfold->General Layout->Dimensions, could you check if that is what you are looking for?

    Best regards,
    Rikard

    April 19, 2017 at 4:40 pm #780052
    ccyran

    Hey Rikard,

    Thats correct. But the width of the body copy drags out and gets really wide. I want it to stop after a certain width.

    If you go on this page of my site: http://www.ccyran.com/projects/rga-stories/
    You’ll see that the copy keeps extending. It does stop after a while because of the width I made in General Layout –> Dimensions, but I want it to stop extending earlier.

    Like how there’s CSS to control that here:
    http://www.quackit.com/css/css_leading.cfm

    With the part that says “max-width: 200px”. I tried using that CSS but it didn’t work.

    Let me know if that makes sense. Thanks!
    Chris

    April 20, 2017 at 4:34 am #780263
    John Torvik

    Hi,

    You can manage the width though this rule:

    .boxed#top {
width: 600px !important;
max-width: 600px !important;
}

    Best regards,
    John Torvik

    April 22, 2017 at 11:00 pm #781809
    ccyran

    Hey John,

    I tried that code but it doesnt seem to be accurate to the pixel value. At 600px, it’s treating the body copy like 190px.

    It also throws off the alignment of the images and the header when I add this code.

    Thank you,
    Chris

    • This reply was modified 7 years, 8 months ago by ccyran.
    April 23, 2017 at 6:02 am #781883
    Rikard

    Hi Chris,

    I’m not sure what you are referring to unfortunately, could you post a screenshot highlighting the copy you would like to set a max width to please?

    Best regards,
    Rikard

    April 23, 2017 at 7:53 pm #782027
    ccyran

    Hi Rikard,

    See below! Let me know if this makes sense…

    Page: http://www.ccyran.com/projects/rga-stories/

    I’d like the body copy width to stay around this width regardless of the browser width:
    https://ibb.co/kdWoi5

    Instead of this happening when the browser width is wider:
    https://ibb.co/mUwoi5

    So I want to have the similar text responsiveness as this website. The way the body copy width eventually stops expanding after a certain width, regardless of how wide the browser is.

    Forgotten Boardwalk Brewing

    Thanks!
    Chris

    • This reply was modified 7 years, 8 months ago by ccyran.
    April 27, 2017 at 7:44 am #783833
    Ismael

    Hi,

    What is the screen resolution of your monitor? The text is inside a grid container so the following css code should help.

    @media only screen and (min-width: 1600px) {
    .av-layout-grid-container {
        max-width: 1024px;
        margin: 0 auto;
    }
}

    It will limit the width of the container to 1024px if the screen is wider than 1600px.

    Best regards,
    Ismael

    April 27, 2017 at 8:45 pm #784193
    ccyran

    Hey,

    Im using a Macbook Pro 13″ Inch with Retina display. 13.3-inch (2560 x 1600).

    This affects all grids right? Not just text within a grid?

    Thank you,
    Chris

    April 28, 2017 at 10:33 am #784387
    Ismael

    Hey!

    Yes, it will affect every grid container. If you want to apply it to a specific grid, create a unique identifier for the grid via the Section ID field or the custom css class field.

    Cheers!
    Ismael

    April 28, 2017 at 5:45 pm #784735
    ccyran

    Okay!

    I’m sorry Im a bit confused by that last part. How exactly do I do that?

    Thanks again,
    Chris

    May 1, 2017 at 3:54 am #785452
    ccyran

    Hey Ismael,

    Specifically, how do I adjust it only to the opening copy on my homepage?

    Protected: Homepage

    Thank you!

    May 1, 2017 at 6:44 am #785523
    Rikard

    Hi,

    If you want to target only the first text on your site then you can try this CSS:

    .home #av-layout-grid-1 .av_textblock_section {
 YOUR CSS GOES HERE
}

    Best regards,
    Rikard

    May 2, 2017 at 12:57 am #786055
    ccyran

    Hey Rikard,

    Excuse my lack of understanding, the part that says “YOUR CSS GOES HERE”… what CSS?

    max-width: 1024px;
    margin: 0 auto;

    Apologies! I figured it out.

    Thanks Rikard!

    • This reply was modified 7 years, 7 months ago by ccyran.
    May 2, 2017 at 4:42 am #786093
    ccyran

    Hey Rikard / Ismael,

    The CSS you provided was perfect…

    @media only screen and (min-width: 1600px) {
    .av-layout-grid-container {
    max-width: 1024px;
    margin: 0 auto;
    }
    }

    But I want this exact CSS, but not to effect the homepage. Can you adjust it?

    Thank you!

    Thanks!
    Chris

    • This reply was modified 7 years, 7 months ago by ccyran.
    May 2, 2017 at 6:32 am #786152
    Ismael

    Hi!

    Do you want to apply this modification only to your portfolio pages? Please use this.

    @media only screen and (min-width: 1600px) {
    .single-portfolio .av-layout-grid-container {
        max-width: 1024px;
        margin: 0 auto;
    }
}

    Best regards,
    Ismael

    May 2, 2017 at 7:58 am #786202
    ccyran

    Ahh this is perfecto!

    Thanks dude!

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Set max-width for all body copy’ is closed to new replies.