Community Forums › Forums › Archived Forums › Design Tips and Tricks › Prose theme – need an extra 10 pixels in the width of the content
Tagged: mobile responsive, prose custom width
- This topic has 4 replies, 2 voices, and was last updated 10 years, 6 months ago by thefussybritches.
-
AuthorPosts
-
September 15, 2013 at 3:00 pm #62698thefussybritchesMember
Hi, I am new to StudioPress and I am using the Prose theme on my mirror site. Since I imported all my posts from my live site, my pictures are too wide for the content size by 10 pixels. I really don't want to change the size of all my pictures when I decide to implement the Prose theme to my live site. At first all my pictures were being cut off on the right side, but then I placed the code below in the custom code box.
.content-sidebar #content,
.sidebar-content #content {
width: 600px;
}
This appears to fix the problem; however, when I view my mirror/test site on my phone it doesn't seem to scale correctly. Does anyone know what CSS I need to place in the custom code box to fix the mobile responsiveness of the design while keeping the extra 10 pixels in the post/content section?My mirror/test site is http://testthefussybritches.thefussybritches.com.
Any help is appreciated!
http://testthefussybritches.thefussybritches.comSeptember 15, 2013 at 4:06 pm #62715marybaumParticipantI'm not much of a fan of just adding code to the custom-code box on the dashboard, because then it's hard to see what the code is really acting on and how it relates to the other rules in the CSS that are also acting on a given element.
What I recommend you do instead is keep a set of your site files - the whole WordPress installation - on your hard drive and make changes to those files ... then upload the new files to your site via FTP. My new favorite tool for all that is Aptana Studio, which is free for Mac, Windows and Linux.
Then you use Inspect Element (Cmd/Ctrl - Opt/Alt - i) to find all the rules that apply to that element and the exact line numbers of the CSS files they're acting on. Then, if you're disciplined (I'm not), you can copy the rule you want to change to the bottom of the section, remove the duplicate properties and add your changes.
The reason I'm even mentioning this is that I'm not sure from reading your post if you still have a problem with the photo widths at full size or just at phone size.
If both, I wonder what happens if you change your width: 600px; value to width: 100%; --
If only the phone value, then you'll want to make that change only in the part of the stylesheet that controls the phone-size display. In that case, you'll want to look for a media query that sets a breakpoint at the width of most modern phones. The code for that will look something like
@media and screen only (max-width: 400px) {/* --- A whole bunch of CSS rules --- */
}
Add the rule with the width: 100%; just to the CSS inside the braces for that media query, and see if that gives you the result you want.
In general, when you're designing responsive, you want to make all your widths percentages instead of pixels.
Hope that helps!
MB
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
September 15, 2013 at 6:25 pm #62737thefussybritchesMemberMarybaum, thanks for your quick response. I did try changing the width to 100%, but the content ended up kicking out the sidebar completely. I am only having a problem with the mobile design. It is weird that me adding 10 pixels to the content affected the mobile design. Just in case, I did find the dimension of the sidebar and subtracted 10 pixels, but it didn't change anything. I did find the @media code you talked about in your response. I don't see anything that I could possibly change, but maybe you will see something that I am overlooking. If you visit my test site on a smartphone, the design gets cut off and you cannot scroll over to see the rest of it.
Here is the @media code in the styles.css file:
/* Responsive Design
------------------------------------------------------------ */
@media only screen and (max-width: 960px) {body,
.content-sidebar-sidebar #content,
.content-sidebar #content,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.full-width-content #content,
.page-template-landing-php #content,
.page-template-landing-php #content-sidebar-wrap,
.sidebar-content #content,
.sidebar-content-sidebar #content,
.sidebar-sidebar-content #content,
#content-sidebar-wrap,
#footer,
#footer .creds,
#footer .gototop,
#footer-widgets,
#header,
#nav,
#sidebar,
#sidebar-alt,
#subnav {
width: 100%;
}#header {
padding: 10px 0;
}#header .widget-area,
#title-area {
width: 100% !important;
}#title-area #description,
#title-area #title {
padding: 0 !important;
}#title-area #title {
line-height: 1.0;
margin: 0 0 10px;
}#header .widget-area {
padding: 10px 0 0 !important;
}#wrap {
border: none !important;
margin: 0 !important;
width: auto;
}#inner {
padding: 10px;
width: auto;
}#description,
#footer .creds,
#footer .gototop,
#title,
#title-area {
float: none;
padding: 0;
text-align: center;
}#header .searchform {
float: none;
margin: 0 0 20px;
padding: 0;
text-align: center;
}#nav li.right {
display: none;
}.enews #subbox,
.s {
width: 60%;
}#footer p {
padding: 0 10px;
}}
Thanks again for your help!
September 15, 2013 at 7:45 pm #62748thefussybritchesMemberAfter I sent my last message I edited the styles.css file directly like you recommended. This did help a little bit. Now everything in the mobile design fits correctly except for the pictures and the captions. If I turn my phone sideways, the photos do fit, but some of the captions are still cut off.
I tried changing everything to 95%, but that didn't work. The pictures were still cut off in the same place, but everything was just smaller.
September 17, 2013 at 9:58 am #62989thefussybritchesMemberI wanted to follow up with this in case anyone has this problem or a similiar problem. I ended up messaging tech support at StudioPress. It turns out that my problem had to do with this captions under the pictures and it was causing the pictures not to resize properly on the mobile format. The response I got back from tech support told me to add the following code:
.wp-caption {
max-width: 100%;
}This fixed my problem. Hopefully if anyone else is having a this problem they will come across this.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.