Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
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. 

Recommended Posts

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 ?


Motherboard: MSI BM250-PRO-VD           <-- Build 1    Build 2 -->        Motherboard: ASRock Z370M Pro4                     
CPU: Intel Core i7-7700                                                   CPU: Intel Core i7-8700K
GPU: Gigabyte G1 Gaming GTX 1080                                          GPU: Gigabyte Windforce OC GTX660 (Saving money for GTX 1080ti)
RAM: 8GB DDR4 2133Mhz                                                     RAM: HyperX Predator 8gb DDR4 3000mhz (Saving money for 8GB more)
PSU: Seasonic M12II EVO 620w Bronze+                                      PSU: Seasonic Focus Gold Plus 650W
CPU Cooler: Gammax 400                                                    CPU Cooler: Gammax 400
SSD: Kingston A400 250GB                                                  HDD: 3 * 1TB WD blue
Headphones: ASUS STRIX 2.0                                                                                               Case: Thermaltake V200 RGB
Monitor: LG 24GM77                                                                                                               Mouse: SteelSeries Rival 110
CaseFans: 3 140mm
HDD: 1TB 7200RPM
Mouse: SteelSeries Rival 500
Phone: Nokia 7 plus



hehe yeaaah boy
https://linustechtips.com/main/uploads/monthly_2018_09/111.PNG.5713b4f39cae3a5badac216b30d99e65.PNG

 

You want to code but don't know how ? (Personal list)

 

Link to post
Share on other sites
Posted · Original PosterOP
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.

Link to post
Share on other sites

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


Sorry, no PC yet.. but i DO have a PS4, laptop and phone so here are those:

 

Laptop:

CPU: Intel Celeron N2840

RAM: (1x4) DDR3 4gb 1600mhz

SCREEN: 15.6” 1366 x 768p

OS: Windows 10 Home (64-bit)

GPU: Intel HD Graphics

HDD: 500gb (probably 5400 RPM)

 

Phone:

CPU: Qualcomm Snapdragon 425

RAM: 2gb

Storage: 16gb (now 24gb)

Screen: 1280 x 720p

Pixel Density: 294 ppi

Camera: 1920 x 1080p 13mp 

OS: Android (7.1 Nougat)

Link to post
Share on other sites
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.


Motherboard: MSI BM250-PRO-VD           <-- Build 1    Build 2 -->        Motherboard: ASRock Z370M Pro4                     
CPU: Intel Core i7-7700                                                   CPU: Intel Core i7-8700K
GPU: Gigabyte G1 Gaming GTX 1080                                          GPU: Gigabyte Windforce OC GTX660 (Saving money for GTX 1080ti)
RAM: 8GB DDR4 2133Mhz                                                     RAM: HyperX Predator 8gb DDR4 3000mhz (Saving money for 8GB more)
PSU: Seasonic M12II EVO 620w Bronze+                                      PSU: Seasonic Focus Gold Plus 650W
CPU Cooler: Gammax 400                                                    CPU Cooler: Gammax 400
SSD: Kingston A400 250GB                                                  HDD: 3 * 1TB WD blue
Headphones: ASUS STRIX 2.0                                                                                               Case: Thermaltake V200 RGB
Monitor: LG 24GM77                                                                                                               Mouse: SteelSeries Rival 110
CaseFans: 3 140mm
HDD: 1TB 7200RPM
Mouse: SteelSeries Rival 500
Phone: Nokia 7 plus



hehe yeaaah boy
https://linustechtips.com/main/uploads/monthly_2018_09/111.PNG.5713b4f39cae3a5badac216b30d99e65.PNG

 

You want to code but don't know how ? (Personal list)

 

Link to post
Share on other sites
Posted · Original PosterOP
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

Link to post
Share on other sites
25 minutes ago, Ashish Sharma-RSi said:

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


Sorry, no PC yet.. but i DO have a PS4, laptop and phone so here are those:

 

Laptop:

CPU: Intel Celeron N2840

RAM: (1x4) DDR3 4gb 1600mhz

SCREEN: 15.6” 1366 x 768p

OS: Windows 10 Home (64-bit)

GPU: Intel HD Graphics

HDD: 500gb (probably 5400 RPM)

 

Phone:

CPU: Qualcomm Snapdragon 425

RAM: 2gb

Storage: 16gb (now 24gb)

Screen: 1280 x 720p

Pixel Density: 294 ppi

Camera: 1920 x 1080p 13mp 

OS: Android (7.1 Nougat)

Link to post
Share on other sites
16 hours ago, Ashish Sharma-RSi 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

Link to post
Share on other sites
Posted · Original PosterOP
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.

Link to post
Share on other sites
Posted · Original PosterOP
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.

Link to post
Share on other sites
Posted · Best Answer
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. 

Link to post
Share on other sites
Posted · Original PosterOP
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.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×