Need help in CSS

[Ashish Sharma-RSi]

Hello, 

 

Can anyone help me out with this alignment problem with my columns? 

You can see the problem in the screenshot.

 

Thank You.

[voiha]

Would be nice to provide some info on what you have used. The easiest solution would be 2x2 table or maybe float:left for the Paper prototyping ?

[Ashish Sharma-RSi]

8 minutes ago, voiha said:

Would be nice to provide some info on what you have used. The easiest solution would be 2x2 table or maybe float:left for the Paper prototyping ?

They are just floating div's.

[iLostMyXbox21]

can you link me to your code? its hard to know whats wrong without knowing whats going on

[voiha]

4 minutes ago, Ashish Sharma-RSi said:

They are just floating div's.

That's what I thought but without the code, I don't know what you did wrong. Have you tried implementing Bootstrap into it ? it's really easy once you get the hang of it.

[Ashish Sharma-RSi]

Here we go...

 

https://drive.google.com/open?id=1C-a5m6wMsJh723gGeaijA16Rwm0RSXwB

[Ashish Sharma-RSi]

50 minutes ago, Ashish Sharma-RSi said:

Here we go...

 

https://drive.google.com/open?id=1C-a5m6wMsJh723gGeaijA16Rwm0RSXwB

Th problem only occurs at meta 769px to 1000px!

[Ashish Sharma-RSi]

Anyone here?

 

[Ashish Sharma-RSi]

On 12/3/2018 at 9:11 PM, iLostMyXbox21 said:

can you link me to your code? its hard to know whats wrong without knowing whats going on

 

 

On 12/3/2018 at 9:14 PM, voiha said:

That's what I thought but without the code, I don't know what you did wrong. Have you tried implementing Bootstrap into it ? it's really easy once you get the hang of it.

Here we go...

 

https://drive.google.com/open?id=1C-a5m6wMsJh723gGeaijA16Rwm0RSXwB

[iLostMyXbox21]

25 minutes ago, Ashish Sharma-RSi said:

 

 

Here we go...

 

https://drive.google.com/open?id=1C-a5m6wMsJh723gGeaijA16Rwm0RSXwB

can i have a .txt file? im on ios and cant open .html files

[FlappyBoobs]

16 hours ago, Ashish Sharma-RSi said:

 

 

Here we go...

 

https://drive.google.com/open?id=1C-a5m6wMsJh723gGeaijA16Rwm0RSXwB

 

You've not included the CSS you've used, which is where the problem lies. 

 

Most likely you've not set the display attribute correctly or your wrapped column is too wide for both to fit. What does the inspector tell you when you open it?

 

Take a look into W3C for flex grid as that will help you a lot. Or just take a look below if you are happy to look at code (this is not my example so I provide no warranty  )

 

https://codepen.io/MattWindle/pen/perZRG

[Ashish Sharma-RSi]

6 hours ago, FlappyBoobs said:

 

You've not included the CSS you've used, which is where the problem lies. 

 

Most likely you've not set the display attribute correctly or your wrapped column is too wide for both to fit. What does the inspector tell you when you open it?

 

Take a look into W3C for flex grid as that will help you a lot. Or just take a look below if you are happy to look at code (this is not my example so I provide no warranty  )

 

https://codepen.io/MattWindle/pen/perZRG

CSS is there in the folder "css"

22 hours ago, iLostMyXbox21 said:

can i have a .txt file? im on ios and cant open .html files

Added .txt files for both css and html.

 

  

Thanks, a lot for helping.

[Ashish Sharma-RSi]

6 hours ago, FlappyBoobs said:

 

You've not included the CSS you've used, which is where the problem lies. 

 

Most likely you've not set the display attribute correctly or your wrapped column is too wide for both to fit. What does the inspector tell you when you open it?

 

Take a look into W3C for flex grid as that will help you a lot. Or just take a look below if you are happy to look at code (this is not my example so I provide no warranty  )

 

https://codepen.io/MattWindle/pen/perZRG

Tried the inspector, still can't fig. out the problem. I know, it is in the padding or margin, but can't seem to figure it out.

[FlappyBoobs]

2 hours ago, Ashish Sharma-RSi said:

Tried the inspector, still can't fig. out the problem. I know, it is in the padding or margin, but can't seem to figure it out.

I missed the css the first time, sorry about that! I've had a look but don't have more than notepad and chrome at the moment (on mobile). I think that you should look at your column layout. At the moment they are behaving like 4 individual elements, rather than 2 rows of 2 elements, which is what I think you are after. As they all have different amounts of text that throws off the layout as they are all different sized boxes (height) as you use % widths on all the boxes at once. 

 

 

Try wrapping the two boxes you want in a row, and the setting the widths and heights to match each other so that the boxes are all the same size, use margin and padding on the boxes to get everything looking good. 

 

I hope that helps point you in the right direction. 

[Ashish Sharma-RSi]

21 hours ago, FlappyBoobs said:

I missed the css the first time, sorry about that! I've had a look but don't have more than notepad and chrome at the moment (on mobile). I think that you should look at your column layout. At the moment they are behaving like 4 individual elements, rather than 2 rows of 2 elements, which is what I think you are after. As they all have different amounts of text that throws off the layout as they are all different sized boxes (height) as you use % widths on all the boxes at once. 

 

 

Try wrapping the two boxes you want in a row, and the setting the widths and heights to match each other so that the boxes are all the same size, use margin and padding on the boxes to get everything looking good. 

 

I hope that helps point you in the right direction. 

Thanks a lot for that.