Unwanted margin in position-2 Topic is solved

[IndianRM]

My site is: http://www.commdoor.com/ I have 6 modules there. The first 3… Mod 1, Mod 2, and Mod 3 are in position-3 and align perfectly as I want. The next 3 are Mod 4 (relied on…), Mod 5 (The company), and Mod 6 (extras) and they are in position-2.

As you can see, they do not lineup correctly...all due to a margin in Mod 4 that is not there on Mod 1. All 6 modules have the exact same settings so I’m assuming position-2 has a margin by default that position-3 does not have. I thought I found how to remove that margin, but it removed the left margins on ALL the other modules which then made them all butt up against each other in width. I’m hoping someone can provide the code to use in my user.CSS to remove that left margin from Mod 4 only...which is the first module in position-2?

[IndianRM]

I’m using the Protostar template.

[JTema]

First of all you can publish more than 1 module in the same position so you can change position of mod4 same as mod1 mod 5 same as mod2 and mod6 same as mod3. But if you do not want to do this then add that code to template.css

Code: Select all

.custom .span4 .triplebox{margin-left:0%!important;}

[IndianRM]

First of all you can publish more than 1 module in the same position so you can change position of mod4 same as mod1 mod 5 same as mod2 and mod6 same as mod3. But if you do not want to do this then add that code to template.css

Code: Select all

.custom .span4 .triplebox{margin-left:0%!important;}

Thank you for the reply. I do realize I could put the 3 modules in position-2 up into position-3 with the first 3 modules...and I may end up doing that…but I was avoiding that because I plan to put in a slideshow in between the two rows of modules and I thought that would be easier by keeping the bottom 3 in a separate position.

In any case , I entered your code in my user.CSS and it didn’t do anything. No change at all. So I went back and took the .custom out and still no changes. Do you have an alternative idea? And thank you again for taking the time to answer me.

[JTema]

Remove first space in code like this
.custom.span4 .triplebox{margin-left:0%!important;}

If does not work then remove second space ilk this
.custom.span4.triplebox{margin-left:0%!important;}

[IndianRM]

Remove first space in code like this
.custom.span4 .triplebox{margin-left:0%!important;}

If does not work then remove second space ilk this
.custom.span4.triplebox{margin-left:0%!important;}

I tried both of those with no results. I also tried another variation by having a space between custom and span4 (but not a space between span4 and triplebox).

Then I put triplebox in front of span4...with and without spaces in between. When that didn’t work either, I put “div” in front of .span4 and still nothing.

Do you know if position-2 in Protostar is set by default to have a margin like that? Only the first module in position-2 (Mod 4)is affected by this margin. The first module in position-3 (Mod1 - which has the exact settings as the problem Mod4) never had a margin from the get go and the other modules need (and have) that margin in order to have a bit of space between them so the text is not running right up against each other. So Mod1 & Mod4 should not have margins...but Mod4 does. Mods 2, 3, 5, 6 all have margins and should. I don’t know how the margin got applied on Mod4 to begin with.

[sozzled]

Try this:

Code: Select all

.custom.span4.triplebox {
	margin-left: unset;
	margin-right: 1em;
} 

(Try to avoid using !important in CSS)

[IndianRM]

Hi Sozzled. Thanks for your suggestion. That solution did actually do something… But what it did is move Mod3 (the last module in position-3) down to the next row. And it is now indented (or has a margin) like Mod4 has. So the right margin code seems to have worked, but it seems the left margin code did not. Looks like it’s close now though as things are changing!

[IndianRM]

Good news!! Been bouncing between browsers on these attempts as I’ve learned, through this process, that not every browser updates right away...even after hitting Control and F5. So when I first did your solution, I had just switched away from Chrome. It did change things to what I stated in my last reply. Being that there was indeed a change, I figured that browser was good for the time being. Then I went back to google and cleaned it out, reloaded it, and it’s perfectly fine. Thank you very much. This is exactly what I wanted and your fix worked perfectly. One of these days I have to buy you a beer or 5!

[sozzled]

Fair enough. You need to remember that what you see on your screen and what I see on my (54.5 cm monitor running at 1920 x 1080 px resolution using Firefox 66.0) screen may be different. As a quick test only, I made the adjustment at full window size and then I reduced it to "tablet" size and the modules displayed OK for me.

But I see what you mean. If you reduce the window size by, say, 15% then the three-across-the-width display goes to two-across the width. That's not very good.

There are also other ways to display <DIV> elements across the screen width. You've chosen your way; I wouldn't have done it that way but that's neither here nor there. You've chosen your way and now we need to try to adapt your method to a variety of different scenarios.

Suggestion: add the following CSS to your custom.css file

Code: Select all

@media only screen and (min-width: 768px) and (max-width: 952px) {
	  .row-fluid .span4 {
        width: 30%;
    }
}

[sozzled]

Beers, donations, etc. gladly welcome. You know where you can find me.

[IndianRM]

Sozzled, just now seeing this. Got tied up with several things after work. Thanks very much for the new CSS! It’s after 1:00 a.m. here in Florida but I’ll use that tomorrow morning. great that you sent it as things are a bit whacky on my iPad. Throughout this process, several times I’ve had things looking good on the wide desktop monitor, then the laptop screen was fine, and even the iPhone looked good...but I’d go to the iPad and things would be whacky...like tonight. Thought the phone would be the problem through this and the iPad fine, but it’s the opposite.

In any case, I bet your new CSS will cure it hopefully. I’m grateful for your help and like how the site is coming now. By no means is the way I’m doing it set in stone. I’ll put your CSS in, but if you suggest I do Some things in a different way, I’m all eyes and ears!!

Thanks again!

[IndianRM]

Well, that didn't seem to get it on the iPad. All others still look good. But no current change in iPad.

[IndianRM]

Well, that didn't seem to get it on the iPad. All others still look good. But no current change in iPad.

Not sure if this helps...but I get this error code from what you sent yesterday (the original fix) even though it works fine on the Monitor screen and the laptop...maybe this has something to do with the way it looks on iPad?

57FF810B-2877-4DA2-9357-383FFFA7899E.png

The error message is:

Expected ( <margin-width> ) | Inherit
But found: unset:

[sozzled]

iPads (and Safari) are curious little devils, aren't they? Fortunately I can access both of these things. I'll have a look around for you in a little bit; I'm in-between a few different jobs just at the moment. All things are possible; it's just a question of time.

[sozzled]

Yeah. There's a problem with viewing the website on an iPad in landscape mode (the three-across goes to two-across); portrait mode is fine (the modules appear three-across).

[sozzled]

I think I have the answer (see references at https://docs.kioskproapp.com/article/66 ... or-content)

Code: Select all

@media only screen and (min-width: 768px) and (max-width: 1536px) {
	  .row-fluid .span4 {
        width: 30%;
    }
}

[IndianRM]

Sozzled, I really appreciate you taking time from your already busy day and looking at this...but that didn't do anything on my end. Desktop Monitors, laptop, phones are all just fine, but the iPad is the same. The wife has one too and checked on hers...exactly the same thing there. Cleaned out the cache on both and even waited over an hour before looking again...just in case...but no luck.

You're correct...iPads appear to be little devils. Is there a way to shrink the border on Mod 3 & 6 only...the last ones in each row? Your prior fix (that did indeed work, on all but the iPad) involved taking out the left border on all and then adding in a right border. The space between Mods 3 & 6 and the "sidebar" is much wider than between the other 4 modules. Just wondering if decreasing that would be enough to bump the modules back up where they belong on an iPad?

If you think of anything else, please let me know...when you have some time of course.

[sozzled]

I've written this a couple of times in this discussion: the answer depends on the screen resolution of the target device. I've tested my suggestions (to the best that I am able) using my own equipment and I cannot find a problem.

The two attachments are taken from screenshots on my (rather antique) iPad in both landscape and portrait mode. The screenshots were taken a few minutes ago. The device I used (as I wrote, it's old) is an iPad 3 with a screen resolution of 2048 x 1536 px. As you can see, the CSS works for me.

The "trick" (if there's a trick) is to fiddle about with the max-width setting in the @media rule. Finding the correct answer is both a science and an art and sometimes it's hit-and-miss because of the number of different viewing devices on the internet. You're probably using a more up-market iPad to me.

Also, as I indicated earlier, there many methods of wrapping <DIV> elements across the width of a screen. I've merely tried to find a band-aid to work with the methodology that you've used.

Does that help?

[IndianRM]

Yes, it does help! Thanks for that. I'll mess around with it some tomorrow. Thanks again.

[IndianRM]

Well, it’s a very happy Friday for me! Based on “Determining screeen dimensions for content” that you sent, I started trying different numbers...even though you clearly had the right ones in the latest code you had sent. Nothing worked. So I put back in what you originally sent and it all works now. No idea what went different from the 1st time I entered the code to just now...but I’m not complaining. It works perfect in portrait and landscape and everything is still fine on all other devices and monitors. So I’m good to go. Thanks very much for your help. You really know your stuff.