Adding more customization for "responsive" theme layout

[brightonkeller+ 0]

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:

/*--------------I don't want my site's "page" to take up the entire browser weidth...
so this css "squishes" or "squeezes" my column wrap and sidebar wrap
in the center with alittle white space on either side----------------------*/
#site .content {
	width: 80em;
}

/*-----my most recent attempt at getting that pretty main content justified (images and text) "look"
since I'm using one-sidebar-right layout,
the 25% is supposed to be pushing what's inside my ".hentry" to the left, 
which will hopefully render a width somewhat close to 550px....--------------------------------*/

.hentry .hentry-pad {
	padding: 25px 25% 25px 0;
}

/*I'm not actually sure what I was doing with this....*/

div.post-nav.fix {
	max-width: 550px;
}

/*remove all padding from "content" class so I can control the padding and alignmnet elsewhere*/

.content .content-pad {
	padding: 0;
}


/*this seemed to be thest best option for getting
ALL my writing to be justified in the main column wrap (i.e. postloop)
and thus to keep my writing the same 
(coupled with the hentry padding) width as my images---------------*/
p {
	text-align: justify;
	margin-top: 10px;
	margin-bottom: 10px;
}

/*Structural global styles - the big picture stuff ---------------------------------------*/

#column-wrap {
	float: left;
	padding-top: 0;
}


#brandnav .content {
	border-bottom: 3px solid #EAEAEA;
	border-top: 0 solid #EAEAEA;
	margin: 20px auto;
	padding: 10px 0;
	background-color: #FFFFFF;
}
/*see question #3 below*/
.responsive .section-brandnav .brandnav-nav {
	position: relative;
	font-size: .7em;
	margin: 0;
}

/*so my branding image (logo) won't totally freak out my readers -
I had to limit the size. 100% width is WAY too much for main browser viewing*/

.section-brandnav .mainlogo-link {
	width: 30%;
}
/*my attempt to get the nav bar to be next to the branding 
(vertically centered) instead of floated right and on top or bottom*/
.section-brandnav .brandnav-nav {
	margin: auto;
	position: absolute;
	right: 0;
	bottom: 50%;
}
ok whew! now that I've gotten all that pasted and explained for ya, I'll ask my specific question(s):

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

.responsive .hentry .hentry-pad {
	padding: 0;
}

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:

/*avoid having navbar "overlay" branding image in responsive layout since
absolute positioning "removed" the content block from the natural flow...
need to make "space" for it again if that makes sense*/
.responsive .section-brandnav .brandnav-nav {
	position: relative;
	font-size: .7em;
	margin: 0;
}

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!!!!!

[Rob 547]

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.

[brightonkeller+ 0]

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.....

[James B 436]

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 - http://www.vanseodesign.com/css/elastic-layout-code/ and http://www.vanseodesign.com/web-design/responsive-layout-patterns/

 

 

Example

.responsive #page #pagelines_content #column-wrap #sidebar1, .responsive #page #pagelines_content #column-main {

    width: 50%; 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 - http://www.pagelines.com/store/plugins/browser-css/

 

Browser specific classes can be found here - http://support.pagelines.me/docs/plugins/browser-specific-css/

[brightonkeller+ 0]

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

[chrisdhanaraj 1]

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) { ... }

[Rob 547]

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 PageLines Pros.

 

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.

[brightonkeller+ 0]

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.

[Rob 547]

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.

[brightonkeller+ 0]

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!

[Rob 547]

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