-
AuthorPosts
-
April 19, 2017 at 6:02 am #779775
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,
Chriswebsite: ccyran.com
April 19, 2017 at 10:13 am #779863Hey 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,
RikardApril 19, 2017 at 4:40 pm #780052Hey 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.cfmWith 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!
ChrisApril 20, 2017 at 4:34 am #780263Hi,
You can manage the width though this rule:
.boxed#top { width: 600px !important; max-width: 600px !important; }
Best regards,
John TorvikApril 22, 2017 at 11:00 pm #781809Hey 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, 7 months ago by ccyran.
April 23, 2017 at 6:02 am #781883Hi 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,
RikardApril 23, 2017 at 7:53 pm #782027Hi 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/kdWoi5Instead of this happening when the browser width is wider:
https://ibb.co/mUwoi5So 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.
Thanks!
Chris- This reply was modified 7 years, 7 months ago by ccyran.
April 27, 2017 at 7:44 am #783833Hi,
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,
IsmaelApril 27, 2017 at 8:45 pm #784193Hey,
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,
ChrisApril 28, 2017 at 10:33 am #784387Hey!
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!
IsmaelApril 28, 2017 at 5:45 pm #784735Okay!
I’m sorry Im a bit confused by that last part. How exactly do I do that?
Thanks again,
ChrisMay 1, 2017 at 3:54 am #785452Hey Ismael,
Specifically, how do I adjust it only to the opening copy on my homepage?
Thank you!
May 1, 2017 at 6:44 am #785523Hi,
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,
RikardMay 2, 2017 at 12:57 am #786055Hey 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, 6 months ago by ccyran.
May 2, 2017 at 4:42 am #786093Hey 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, 6 months ago by ccyran.
May 2, 2017 at 6:32 am #786152Hi!
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,
IsmaelMay 2, 2017 at 7:58 am #786202Ahh this is perfecto!
Thanks dude!
-
AuthorPosts
- The topic ‘Set max-width for all body copy’ is closed to new replies.