CMS Development

javlib
Participant

CMS for Devs Practicum: 1100px wide?

SOLVE

One of the practicum requirements is: "All content must be centered and 1100 pixels wide on large screens." What do you mean with that? body{width:1100px} when the screen is wider than 900px would be okay?

0 Upvotes
2 Accepted solutions
cbarley10
Solution
Contributor

CMS for Devs Practicum: 1100px wide?

SOLVE

Hi @javlib , It means that the content should be no wider than 1100px on desktop screens and should be centered. So the best way to do that would be to add a class to the main group of the body of your template, then give that class some styles so that you can use that class again if need be:

 

.my-class {
    max-width: 1100px;
    float: none;
    margin: 0 auto;
}

Then you could use a media query if needed on smaller screens. You'd want to make sure to use the max-width property, as width would simply hard-code the width of your content to 1100px which would not be mobile responsive.

View solution in original post

cbarley10
Solution
Contributor

CMS for Devs Practicum: 1100px wide?

SOLVE

Hi @javlib , you need to add a max-width of 1100px to the #container ID. 

 

https://prnt.sc/po39g5

 

View solution in original post

8 Replies 8
cbarley10
Solution
Contributor

CMS for Devs Practicum: 1100px wide?

SOLVE

Hi @javlib , It means that the content should be no wider than 1100px on desktop screens and should be centered. So the best way to do that would be to add a class to the main group of the body of your template, then give that class some styles so that you can use that class again if need be:

 

.my-class {
    max-width: 1100px;
    float: none;
    margin: 0 auto;
}

Then you could use a media query if needed on smaller screens. You'd want to make sure to use the max-width property, as width would simply hard-code the width of your content to 1100px which would not be mobile responsive.

javlib
Participant

CMS for Devs Practicum: 1100px wide?

SOLVE

Okay so I used your solution for the template body width, but now I have another problem I tried to solve in so many ways I don't know what to do anymore. Everything in the body group of modules seems to be perpetually alinged to the left side of the screen, and I just can't fix it.

Captura.PNGCaptura2.PNGAs you can see, this problem does not affect the footer nor header, and I don't know what else I can do to solve it. I need the body aligned with the title and the menus.

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

CMS for Devs Practicum: 1100px wide?

SOLVE

can you give us a preview link?

javlib
Participant

CMS for Devs Practicum: 1100px wide?

SOLVE

https://app.hubspot.com/design-previewer/6519322/templates/18176949337

 

I don't know if this is the link you're asking for (new at hs, sorry).

0 Upvotes
cbarley10
Contributor

CMS for Devs Practicum: 1100px wide?

SOLVE

Hey @javlib , you'd need to send the preview of your template, which means you should click "preview without display options". 

 

https://prnt.sc/pnkn1q

0 Upvotes
javlib
Participant

CMS for Devs Practicum: 1100px wide?

SOLVE
0 Upvotes
carrot
Member

CMS for Devs Practicum: 1100px wide?

SOLVE

Hi I am working in CMS template for last one month . I am a non developer. I have seen the preview your template here. Could you please help me out to achieve this 'leadership' gallery. Although I have also created custom module for it. but I really need some assistance.

Please help me .
I am sending you the link of mine one.

http://hubspot-developers-kazbkj-5765658.hs-sites.com/demo-page

Thanks
Monika

0 Upvotes
cbarley10
Solution
Contributor

CMS for Devs Practicum: 1100px wide?

SOLVE

Hi @javlib , you need to add a max-width of 1100px to the #container ID. 

 

https://prnt.sc/po39g5