Custom template and responsive

Shapely
1

Hello,
I am building a child theme of Shapely.
For some pages, I need a custom page layout (say full with, with some text on top of picture, and soemtimes 2 to 3 colmun of different width). I can add some html in the pages themselves (where I actually type in the page content in the CMS) BUT they then loose their responsiveness as I guess this extra html is overwriting the responsive behaviors…
So I think I have to create custom page template. I have for now those questions :

  • I can’t find where to edit the container (in style.css) so that when the content is 100%; it actually stretches from edge to edge. Could you gives clue where is it?
  • When I created my new page template, how do I specify the ‘styling’ of this page template ? I wish to add it all in style.css. How do only edit for example the content width of only that template ?
  • Shapely is responsive, in at least 3 levels (when I reframe the window smaller the content readjust itself, at least 2 times, like computer, tablet and then smartphone-like sizes). I was hoping to find those conditional styling in style.css but I can’t find it. Where is it located ? I might want to adjust the site deals with different screen sizes.

Many many thanks in advance, I appreciate your help.

2

Ok, I might have answer my own questions by digging in the forum, so will share my findings:

After created a template-[name template].php, I simply added the following to my CSS:

@media (min-width: 800px){
body.page-template-template-[name template] #main {
    width: 100%;
    //+extra styling if necessary
}
body.page-template-template-[name template] #main .col-md-12{
  padding: 0;
}
}

I guess @media is used to make the site responsive, so that what’s behind ex: “(min-width: 800px)” work as a condition. (I naively thought originally that it was picking those “conditions” from another file…)
Is that correct ?

(Now it should be possible to restrict the text in ways that the text does not run from edge to edge, as I need it)

Further questions:

  • In shapely’s style.css, I see a lot of @media conditions with all different max or min-width. I would have thought that the used width would be often the same. Now there is like a lot of overlap in the @media conditions. What’s the thoughts behind that?
  • If I want to set different type of paragrah style in the same page, what is the best way to do that ? I am thinking of creating different paragraph styles (say one colmun, two columns, three colmuns) and then use the corresponding tags when I will write my article. Would that make sense ? Or is there a sturdier or easier way ?

Thanks,

3

Hi @menm,

I hope you are well today and thank you for your questions.

Ok, I might have answer my own questions by digging in the forum,

Awesome great to see you got that found.

I guess @media is used to make the site responsive, so that what’s behind ex: “(min-width: 800px)” work as a condition. (I naively thought originally that it was picking those “conditions” from another file…) Is that correct ?

@media is the media query condition in the CSS and it is not taken from any other file.

You will find more information about it on the following pages.

https://www.w3.org/TR/css3-mediaqueries/

Further questions: – In shapely’s style.css, I see a lot of @media conditions with all different max or min-width. I would have thought that the used width would be often the same. Now there is like a lot of overlap in the @media conditions. What’s the thoughts behind that? – If I want to set different type of paragrah style in the same page, what is the best way to do that ? I am thinking of creating different paragraph styles (say one colmun, two columns, three colmuns) and then use the corresponding tags when I will write my article. Would that make sense ? Or is there a sturdier or easier way ?

To help us keep support thread separates could you please create new thread for your other questions here Shapely - Colorlib Support Forum instead of asking them in your single thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Best Regards,
Movin

4

Hi Movin,
Thanks so much for the feedback.
I think one of my question though belongs to this thread :

– In shapely’s style.css, I see a lot of @media conditions with all different max or min-width. I would have thought that the used width would be often the same. Now there is like a lot of overlap in the @media conditions. What’s the thoughts behind that?
I greatly appreciate your expertise. Thanks,

menm

5
In shapely’s style.css, I see a lot of @media conditions with all different max or min-width. I would have thought that the used width would be often the same.

No it isn’t same. It has different min and max widths for different screens sizes.

You will find more information about it on the following pages.

https://www.w3.org/TR/css3-mediaqueries/

Now there is like a lot of overlap in the @media conditions. What’s the thoughts behind that?

Could you please share me any example of overlapping condition so that i can help you?