Jump to content

Archived

This topic is now archived and is closed to further replies.

janpeeters

DMS responsive questions

Recommended Posts

janpeeters

Hi,

 

I'm almost finished with my site www.lovo.nu and now trying to terminate some strange layout problems that I'm seeing on iPad (XCode iOS Simulator). 

 

First a strangely behaving column on my blog page (now just filled with dummie articles): www.lovo.nu/blog

 

When you look at the screenshot from within my Chrome browser all seems normal:

http://cl.ly/image/142s042i1o40

If you look at the page in the iPad simulator

http://cl.ly/image/2c2R0J2e2103

The 2/12 text box section on the left becomes too small. The blog section is in a 10/12 page/post loop section. I use a blogsubtext class in the 2/12 section but that consists only of text changes.

 

How could this happen?

 

Second I've noticed that on my homepage www.lovo.nu

http://cl.ly/image/2b2f3S3V090g

misses padding around the iBoxes section when viewed on an iPad

http://cl.ly/image/0X2T3V2D001c

 

I've done some customizations to the iBoxes but it doesn't look like this is causes the missing padding. Just for reference I post the changes below maybe I'm overlooking something.

 

Hopefully someone knows if this is an imperfection in the DMS CSS/LESS or that I'm doing something wrong. I'm hoping to find some CSS to give it some padding.

 

Thanks, Jan

 

 

.ibox-desc {
text-align: left;
}
 
.ibox .ibox-text h4 {
margin-bottom: 10px;
color:white;
}
 
.ibox .ibox-media .ibox-icon-border { border-radius: 0px;}
 
.ibox.top-aligned .ibox-media {
margin-right: auto;
margin-left: auto;
max-width: 95%;
}
 
.ibox.top-aligned .ibox-media .media-type-image {
margin-bottom: 10%;
padding: 33% 0;
height: 0;
}
 

Share this post


Link to post
Share on other sites
Danny

Hi,

 

I think the best thing to do remove all your customization and see if this issue persists.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny

OK, I actually think its an issue with the iOS Simulator, as I have viewed your site on my iPad using Chrome and everything looks fine.

 

http://d.pr/i/JWtZ

 

The issue with the button is you probably down to the icons, if you resize your browser on your desktop you get the same result. You could try using the block button instead.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

Hi Danny,

 

thanks for testing. The layout problem was with www.lovo.nu/blog. The left 2/12 column is too small when viewed in the simulator. http://cl.ly/image/2c2R0J2e2103 Does that one look fine on your iPad too? 

Oh and the button doesn't change width when I resize Chrome on my desktop. When Chrome is below 400px it hides the button for smaller devices, but I have not seen it become smaller.

 

The padding problem I mention in 2 looks the same on your iPad as on the simulator, as far as I can tell from your screenshot anyway. Maybe I wasn't clear enough about the problem: The iBoxes are almost connected to sides of screen without any padding. I would think that there is always at least a 10px padding surrounding sections. 

 

Thanks, Jan

Share this post


Link to post
Share on other sites
Danny

Well thats your issue there, as far as I am aware the iBoxes should be stacked on top of one another and be side by side. So it must be related to your custom CSS.

 

The other issues regarding your problem with the 2/12 Blog and text, that is fine the issue is you're using a plugin to generate those images in that grid, when you resize your browser you will notice that it goes from a 3 column layout to a 2 and then adds margin to the left and right, this is what is causing the gap.

 

http://d.pr/i/laft


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

Hi Danny,

 

Thanks for your analysis.

Indeed the blog problem shows up because the gris adds spacing to both sides. I'll contact the developer about that.

 

Regarding the iBoxes on my homepage... they should stack and they do. On a smaller screen it works fine. They just don't stack (yet) because the iPads screen is wide enough. I think the 'stack point' in DMS CSS lies below this.

On an iPhone 3GS it stacks and looks fine with padding and all: http://cl.ly/image/052i3u223w1V (the green images are probably a retina-plugin issue so neglect that).

 

My issue is that there is no 'white' space on both sides of the group of iBoxes on iPad. This is also the case with all custom CSS turned off (see reposted screens below). So I don't think it's my custom CSS. It might just be something that is not added in DMS core CSS or that I have to add manually if it's intentionally left out of DMS.

 

I post the screenshot again for reference:

With Custom CSS:

http://cl.ly/image/0X2T3V2D001c

Without custom CSS:

http://cl.ly/image/0l1J1V1O0M2d

Both touch the sides of the screen but of course it's more visible when using left align.

 

So what I'm looking for is how I can have the group of iBoxes give some padding left and right to prevent being cramped on an iPad or other tablet screen. They should not get extra padding on mobile phones and desktop.

 

Thanks, Jan

Share this post


Link to post
Share on other sites
Danny

I have just added the iBox section to a test site, when I view the iBox section on my iPad although they aren't stacked, there is padding - http://d.pr/i/1gT1

 

So can you provide a screenshot of your iBox settings please. If you have no padding meaning your text is aligned right to the edge of the screen, then its most likely either the way you have added your text or you have removed the padding via custom CSS or a setting.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

Hi Danny,

 

yeah that was what I thought. So I checked all that before posting. 

http://cl.ly/image/2N3C2M1b3Z3Y

The iBoxes are quite default, no additional classes or anything.

http://cl.ly/image/0314080o232i

Standard padding is set to 20px. (sorry it's in dutch, but you'll get the numbers).

And the screenshots I provided before were with all Custom CSS deactivated.

 

The one thing I just saw and is weird is the following.

When I drag the site width handle no pixel dimension is displayed. There is also a limit to how wide I can go. When I tried this on another site I could go as wide as my screen. But maybe that's a settings thing.

 

I also noticed a while back that I can drag the width handles of all separate section areas (and I have quite a few on this page) independently. This doesn't stick, it jumps back to one width for all sections areas when I publish. I've made a video with Jing so you can see this behavior, but I didn't publish at the end to prevent messing up my site.

You can see the 'no pixel  dimension' in this movie too.

http://screencast.com/t/0hQuTswe

 

Jan

 

ps: en this works the same with CustCSS off. Just tested.

Share this post


Link to post
Share on other sites
Danny

OK, that video you posted is weird as I am not even able to recreate that. Therefore, for that to be happening, you must have some custom script or something causing it. The same thing is most likely effecting your padding when view on a tablet.

I recommend you disable all plugins, if you're using a cache plugin flush the cache before disabling and remove all custom CSS/custom scripts.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

Okay thanks will try that. 

Share this post


Link to post
Share on other sites
Danny

Keep us posted.

Also, if you have time, can you try and do the same thing on a different setup and see if you can recreate the issue yourself.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

Hi Danny,

 

Emptying the cache before deactivation is what made the difference in finding the troublemaker.

The plugin that causes this weird section area behavior is 

http://codecanyon.net/item/quick-ajax-modern-wordpress-ajax-query-posts/5740469

I'll contact the developer about this so that he can download DMS and experiment with it.

Sorry I didn't think of emptying the cache before.

 

The problem with the padding still existed:

http://cl.ly/image/0U2d1C263M2k

 

Do you know which div is the container for all iboxes together? I might give that one a margin or padding with @media to see if it solves it.

 

Thanks for your consistent help and patience ;-)

Jan

Share this post


Link to post
Share on other sites
Danny

Can you provide a screenshot of each of your ibox settings please so I can see how you have added your text, as I am not able to recreate this issue, when I view my iboxes on my ipad, there is padding either side.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

Hi Danny,

 

iBox 1: http://cl.ly/image/32061v3A1x2l

iBox 2: http://cl.ly/image/0j1u3U3F2r2d

iBox 3: http://cl.ly/image/2R2X1D0p1U1T

 

Could you check what happens if you make your test setup site 950px wide and resize your browser window to iPad width then?

That's a variable we didn't check yet.

 

Jan

Share this post


Link to post
Share on other sites
Danny

OK, the issue is how you have added your text, when I copy and paste your text into an iBox text area, I get the same result. How did you format that text ?

 

Its as though it is already pre centered somehow ?

Look at the images below, the Blah Blah Blah text has padding on the left where as your text doesn't.

 

http://d.pr/i/joiA

 

Then I replaced your text and wrote Blah Blah Blah again in the third iBox = no issue - Blah Blah Blah 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

Could you try adding more random text to your blablabla iBox. Maybe some Lorem Ipsum ;-) Because the same words over and over give (i think always) a constant margin left and right. Not sure if this gives any other results but I'm curious to see. 

Share this post


Link to post
Share on other sites
Danny

OK, there is an issue here. If you copy and paste text for some odd reason. I have reported this is an issue.

 

In the meantime, if you add the following it may resolve your problem for the timebeing:

 

.ibox-desc {
padding: 0 10px;
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

I was just setting up a local test DMS when your answer came in. 

 

I've found out some interesting stuff.

It doesn't matter if you copy/paste or type in the text manually. I've typed it in manually and it gave the same results.

 

The padding problem can be solved if you put your iBoxes in a Column instead of plainly in a section.

http://cl.ly/image/3s061w1G323P (upper one in a column, bottom one not)

 

And this is how lovo.nu looks when the iBoxes overthere are put in a column. 

http://d.pr/i/ZcZF

A bit better. Padding might still be a bit bigger, but I'll experiment with the code you posted.

 

So it might be useful if the devs can make some css conditional. If iBox in column then no extra padding, if not in column then extra padding. But how you should achieve this beats me.

 

And for something completely different. Is there a way to prevent the forums from sending me two emails everytime someone replies to a topic I'm subscribed too. I think the emails with the response already in it are very useful but the notification that someone posted a respons not so much.

 

Glad we tackled this one. And thanks again!

Share this post


Link to post
Share on other sites
Danny

OK, so adding the iBox section to a Column resolves the issue. I will add this info to the tracker too.

 

As far as I know, it shouldn't be sending you two emails, try not following the topic and see if that resolves the issue.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

That's correct.

Share this post


Link to post
Share on other sites
Danny

OK, ive updated the issue with this new information, thanks!


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×