Posts in half width on mobiles

[Kjetil]

Hi
After updating to version 3, post lists and single posts on dolcevita.no only fill half of the screen width on mobile phones. They show up as they should on my stationary Mac and Pad.
The question of course, is if you have a cure.
It is well possible that some custom css makes this happen, as I run a child theme with quite a few adjustments. I had no such problem before upgrading, though.
Thank you for any input
Kjetil
Example – list: http://www.dolcevita.no/category/sicilia/
Example – post: http://www.dolcevita.no/tyrkertrappa-ved-tempeldalen/
…work fine on stationary computer, half width on mobile

Topic

[Jason Bobich]

Please see here: http://support.themeblvd.com/forums/topic/awesome-theme-mobile-page-width-question/#post-11876

[Kjetil]

Thanks for your quick response – but, sorry – I tried inserting those two variations of css into my child-theme/custom.css file, but it didn’t make any difference. The posts and post lists still just fill half the screen width. (There shouldn’t be any other way to do this, right..?)
I don’t believe the new css should interfere with any of my other custom css, since the only other place I’ve touched the .boxed class is in the bottom of the css shown below.
Great if you have other hints :o)
Kjetil

This is the main part of my custom css, in case you see something I don’t:
(The part left out is css for images and for some special elements living just on a few special pages.=

/* Body’n – bredden på hovedcontainern */
#top, #featured, #main, #bottom, #after-footer {
margin: 0 auto;
width: 1190px;
}
/* Telefonnummer til høyre for headingen fjernet */
#branding .header-text {
display: none;
}
/* Featured-feltet – for smalt nå*/
.element-inner
{
max-width: 1150px;
}
/* (Ytre høyre) høyre sidestolpe */
.double_sidebar_left .left-sidebar, .double_sidebar_right .right-sidebar {
width: 14%;
}

/* (Indre høyre) Venstre side stolpe */
.double_sidebar_left .right-sidebar, .double_sidebar_right .left-sidebar {
width: 24%;
}

/* Content-feltet */
.double_sidebar_left #content, .double_sidebar_right #content {
width: 56%;
}

/* Boksen rundt bildet i featured-feltet: bredden – satt inn width
.standard-slider .slide .media-inner {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px 4px 4px 4px;
padding: 4px;
width: 1120px;
}
*/

/* Boksen rundt bildet i featured-feltet: containern rundt boksen – width ned fra 60% til ca 50% */
.tight .grid_fifth_3 {
width: 49.2%;
}
/* skyggefeltet i full-width featured-bildet, lagt inn margin-left, max-width 75-100px, kuttet bottom: 10px; */
.standard-slider .media-full .content {
background: none repeat scroll 0 0 #333333;
color: #FFFFFF;
left: 10px;
margin-left: -10px;
margin-bottom: -10px;
max-width: 100%;
opacity: 0.8;
}

/* Metalinja i post-liste – mellom tittel og utdrag – lagt til display: none; */
.single-post .entry-meta, .post_list .entry-meta {
font-size: 11px;
font-style: italic;
display: none;
}

/* bredden på nedre del av forsiden, med kolonner el – endret bredde fra 1100px */
#top, #featured, #main, #featured_below, #bottom, #after-footer {
margin: 0 auto;
max-width: 1190px;
}

/* Fjernet linje over tabellceller */
.entry-content td, .comment-content td {
border: 0 none;
padding: 6px 10px 6px 0;
}

/* Skygge bak enkelte Header-tekster */
span.header-shade {
display: none;
height: 100%;
position: absolute;
width: 100%;
}
.header-shade {
background-image: none;
}
.boxed-layout .header-shade, .post_grid .header-shade, .article-wrap .header-shade, #content .element-slider-standard .header-shade, .element-content .header-shade, #content .element-post_grid_slider .header-shade, .element-post_list_slider .header-shade, #content .element-slogan .header-shade, .element-tweet .header-shade, #comments .comment-body .header-shade, #respond .header-shade, .tab-content .header-shade {
background: none;
}

[Jason Bobich]

Apologies, I misunderstood the original issue. I was skimming on my phone and was trying to get you a quick solution so you didn’t have to wait until I actually went through support.

Anyway, I checked out your site, and can see what you’re referring to. In my Chrome browser’s inspector, I deleted everything in your custom.css and the problem went away. So, this means something you’ve written in your custom.css is doing it.

A good way to troubleshoot when you have no idea where to look is just to start removing chunks until you find the problem piece. Then, put everything back.

If I had to guess, I’d say it’s something to do with how you’re adjusting the width of the content/sidebar containers. I think we chatted about this before. You shouldn’t be manually adjusting these column widths with CSS in the newer version. It’s better to utilize filtering Bootstrap’s grid system:

http://dev.themeblvd.com/tutorial/sidebar-layouts/#widths

Otherwise, with the way you’re doing it, you’re going to have to style the columns back to 100% on the smaller viewport sizes.

[Kjetil]

Waking up an old topic here… I finally got time and courage to dig into this.
I wanted a layout with a double right sidebar (one wide one narrower) and avoid a problem on smartphones, that the main content (the content field) showed up in half width.
The solution was to remove the custom css for the content area and sidebars (from alyeska-child/custom.css) + to edit the widths of the double right sidebars in alyeska/framework/includes/general (line 539-545) from
'double_sidebar_right' => array(
'name' => 'Double Right Sidebars',
'id' => 'double_sidebar_right',
'columns' => array(
'content' => 'span6',
'left' => 'span3',
'right' => 'span3'
to
'double_sidebar_right' => array(
'name' => 'Double Right Sidebars',
'id' => 'double_sidebar_right',
'columns' => array(
'content' => 'span7',
'left' => 'span3',
'right' => 'span2'
This gave me the narrow outer right (“right”) sidebar and the wider inner right (“left”) sidebar.
IT WORKS!

Now, what still puzzles me a bit is that I have to edit a core theme file, which you have warned as several times not to do.
So is there a way to avoid this?
Also, how can I fine-tune the width of the sidebars?
That part I couldn’t figure out from the tutorial you provided above.

Thanks,
Kjetil

[Jason Bobich]

You absolutely shouldn’t be deleting this from the theme. Again, you edit this as described here:

http://dev.themeblvd.com/tutorial/sidebar-layouts/#widths

You’re deleting from an array that has a filter on it. I’m not quite sure why you’d be deleting those items, opposed to changing the width as described in the article, or making CSS tweaks. However, if you were deleting from the array, there’s a filter on it. So you’d just do it from your child theme functions.php.

[Kjetil]

Maybe I wasn’t clear enough, but I have NOT deleted anything from the mother theme’s core files. I have only changed the span settings (in general.php) for the “double_sidebar_right”.
That should be in accordance with the article you linked to.
The only thing I have removed/ deleted was the css I’ve previously added to my child theme’s custom.css file.

The last thing you mention, about the child theme’s function.php file – does it mean I can add the the altered function from general.php there? (The lines from 492 to 550?)

Thanks,
Kj

[Jason Bobich]

The last thing you mention, about the child theme’s function.php file – does it mean I can add the the altered function from general.php there? (The lines from 492 to 550?)

You’ll need to understand the basics of an array in PHP and how filters work in WordPress. This is an array of data, and it has a filter on it. From your functions file, you’d create your own function that utilizes that filter to alter the data of the array. This is made possible because the theme applies this filter onto the entire array of data.

http://dev.themeblvd.com/tutorial/filters/

http://codex.wordpress.org/Glossary#Filter

[Kjetil]

OK, thanks
I’m sure I’ll get it :o)

[Author]

Replies