Jump to content


Photo
- - - - -

Adding more customization for "responsive" theme layout


  • Please log in to reply
10 replies to this topic

#1 brightonkeller

brightonkeller

    Super Member

  • Members

  • 159 posts
  • LocationNew Orleans
  • Country: Country Flag

Posted 15 May 2013 - 03:20 PM

Hi there!

 

1. If I want to add additional CSS (specifically related to resonive design), is there anything in particular I need to know?

 

For my site, I want the #column-wrap and #sidebar-wrap (one sidebar right layout) to be responive, but I also want the clean look and feel of a justified main content column - where the text is justified and the same (well, as close as possible) width as all my 550px images. This way, there's a pretty, nice and neat content column where everything "lines up" so to say.

 

In order to acheive this look, while maintaining the capability of responding to different browsers and devices, I've realized that using a fixed pixel width (such as width: 550px or max-width: 550px) is not the best option because it limits my design.

 

As of right now I'm using the following for my global layout (just to give you a background) of what I've already got behind the site:

Please Login or Register to see this Hidden Content

1 (continued from above) I'm using the following css to add my own responsive instructions:

Please Login or Register to see this Hidden Content

but it actually eneded up overriding my other ".hentry .hentry-pad" css that's in the previous chunk of code. Is there a certain way I should be writing the css so it ONLY "comes alive" (haha) when viewed from a device? (@media screen,, or whatever yall call it in your LESS...)

 

2. I don't want my .hentry CSS to restrict me from having full width content layouts on other pages of my site......if that makes sense?

 

3. The following CSS is used to undeo the mess I made by using absolute positioning in order to vertically align my nav bar with my branding image:

Please Login or Register to see this Hidden Content

I think this css (contrary to my hentry responsive css) actually works. Is this the best way to do this? Any thoughts?

 

4. Also, I don't want this to happen (tried to attach image - but just image column main with padding on right when viewing via iPhone/phone). I still want my "columb-wrap" to be 100% when viewing from other devices. I don't know what this margin/padding is here? I can't figure it out. (also indicated by the fact that there's a scroll bar....wouldn't be there if content was 100% - right?)

 

thank you in advance!!!!!



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 15 May 2013 - 04:03 PM

Hi Brighton,

 

I'm trying to go through all this, but it appears you're going to need a developer to do some of this stuff.

 

My first question is why you'd want the sidebars to be responsive, as that could destroy the content you add to them. Thinking carefully about this, I'm seeing the risk of placing a widget or other content into the sidebar, and then it reducing in size with a mobile device that results in the sidebar narrowing so much that the content isn't visible.   Have you thought about this?

 

I'm going through each of these issues, and will be replying in more detail today.  Thanks for your patience.



#3 brightonkeller

brightonkeller

    Super Member

  • Members

  • 159 posts
  • LocationNew Orleans
  • Country: Country Flag

Posted 16 May 2013 - 07:44 PM

that's what you got out of all this? haha.

 

well could you just maybe answer my question about how to properly write css coding for .responsive design so thta it only applies to alternative browser widths (i.e. iphones)???

 

and I don't really wan tmy sidebar to be responsive, but I DO want my main column to be adaptable for different screen sizes AND I don't want to limit myself to only haing one layout type. For instance, If i'm using one side bar right on one page and full width on another.....



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 May 2013 - 12:31 AM

The responsive layout is controlled by css, when it goes into the responsive layout each main section goes to 100% and the floats get removed. If you want to adjust them then in the css change the width and add the float left/right so you can chose how it lines up. These two posts should explain this better -

Please Login or Register to see this Hidden Content

and

Please Login or Register to see this Hidden Content

 

 
Example
.responsive #page #pagelines_content #column-wrap #sidebar1, .responsive #page #pagelines_content #column-main {
    width50%; float:right;
}

 

To go even further and decide which devices display which layouts you can use browser specific css. There's a plugin in the pagelines store which will allow you to add the classes, the classes can be found on the docs links below.

 

Plugin -

Please Login or Register to see this Hidden Content

 

Browser specific classes can be found here -

Please Login or Register to see this Hidden Content


  • brightonkeller likes this

#5 brightonkeller

brightonkeller

    Super Member

  • Members

  • 159 posts
  • LocationNew Orleans
  • Country: Country Flag

Posted 17 May 2013 - 06:37 PM

so..i'm just curious, did anyone read my actual questions? I put a lot of work into that! haha



#6 chrisdhanaraj

chrisdhanaraj

    Member

  • Members
  • 29 posts
  • Framework Version:4.1
  • Country: Country Flag

Posted 17 May 2013 - 08:42 PM

Hey there, if you want to target different screen sizes with CSS you had the answer in your question - @media screen. You were just missing the second part where you specify the actual size. Pagelines uses some amalgamation of Bootstrap's responsive grid (I'm trying to work it out myself) but these are the classes you need.

 

 

  1. /* Large desktop */
  2. @media (min-width: 1200px) { ... }
  3.  
  4. /* Portrait tablet to landscape and desktop */
  5. @media (min-width: 768px) and (max-width: 979px) { ... }
  6.  
  7. /* Landscape phone to portrait tablet */
  8. @media (max-width: 767px) { ... }
  9.  
  10. /* Landscape phones and down */
  11. @media (max-width: 480px) { ... }

  • dokether likes this

#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 May 2013 - 05:54 PM

Brighton,

 

Allow me to clarify. We did read your extremely long posting. However, we do not provide custom CSS support here to achieve such results. We'd recommend you hire a programmer/developer to achieve custom responsiveness. The request is outside the scope of technical support. I'm sure you understand that the support team here is trained quite well in CSS, but we are not programmers or developers and are unable to customize anyone's site, which is essentially what you're asking for with this topic.

 

We're here to help people when something is broken or, when someone needs advice or guidance.  My guidance to you is that the requested changes are ill-advised, but you're certainly free to hire a developer to execute anything, with the full understanding that we cannot support these customizations. If they break, you'll have to go back to the developer you hire.  This is a very extensive project, so I'm recommending you contact some of our developers via

Please Login or Register to see this Hidden Content

.

 

I'm sure you understand there are limits to the support we're able to provide, though we do endeavor to go the distance for all our customers, to the very best of our abilities.



#8 brightonkeller

brightonkeller

    Super Member

  • Members

  • 159 posts
  • LocationNew Orleans
  • Country: Country Flag

Posted 19 May 2013 - 07:51 PM

Rob,

 

Thanks for getting back to me. Ok, I understand. Sorry, I was under the impression that it was acceptable to ask for advice relating to specific CSS-based issues. In my case, I was just having issues identifying the appropriate selectors for applying CSS to particular "pages" or, even more specifically, for particular screen sizes (i.e. mobile devices/@media screens).

 

I realize now that my post must have been too detailed, as it suggested specific advice related to my site in particular. But I would like you to know that I only included all those details so that I could show you that I've done troubleshooting and explain why and how I did each different step. Also, I wanted to explain and show how I had tried different things and what those results were.

 

I actually figured this out on my own and was able to figure out a way to justify my main content colum (while still having it be responsive for alternative devices) and also have the capability of using other pageline "layouts" on other pages of my site (e.g. "full width" without having the specific CSS limit the width or the content within the full size width, if that makes sense).

 

I will make note of this and will keep your response in mind when posting from now on.



#9 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 19 May 2013 - 08:08 PM

Brighton,

 

First let me say I'm thrilled you were able to resolve this issue.  That's fantastic!!!

 

My apologies if my explanation of the limits of our support were... well, limiting.  There's a difficult to find line between technical support and design modifications.  Unfortunately, we're limited to those issues of technical support. I just wanted you to know that both Danny and I did read the full text of your initial posting, and did not in any way ignore or glance-over your issues. We take each issue in the forum seriously and want very much to help everyone with each topic.

 

I appreciate your kind understanding of our limits.



#10 brightonkeller

brightonkeller

    Super Member

  • Members

  • 159 posts
  • LocationNew Orleans
  • Country: Country Flag

Posted 19 May 2013 - 08:33 PM

Rob,

 

Thanks for responding again! I know these things and it's the #1 reason why I chose pagelines and have stuck with it - you guys have got a great group of people running it and an awesome and evolving support team! I'm glad (but also sorry) you read my whole post - next time I'll try and keep it more concise and maybe not as daunting? haha.

 

This might sound weird, but I've actually printed out ALL the compiled pagelines css (all 300 or so pages, depending on the "add ons" I've got) and have studied them thoroughly. I felt like I had to know the framework of the theme in order to not only customize the look I want, but to also override what I didn't want to "sneak up" on me, if that makes sense! (for instance, if I didn't specifically set a property, then it would inherit that property from somewhere else in the theme's CSS).

 

I've also studied the LESS that compiles into the CSS....so I just didn't want you to think I was taking the easy way out either! But I'm not programmer, coder, designer, etc., so even after all my investigation and hard work, I still am not able to figure things out sometimes. I jsut starting using LESS for my colors though and I'm obsessed - it's SO much easier!!!!

 

anyway, thanks for being awesome pagelines!



#11 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 19 May 2013 - 08:35 PM

Anytime we can help, we will, as best we can!