make multiple divs surround a circle at center with responsive for mobile devicesMake a div fill the height of the remaining screen spaceHow to horizontally center a <div>?Using jQuery to center a DIV on the screenHow to vertically center a div for all browsers?How to make div not larger than its contents?How to make a div 100% height of the browser window?How to center absolutely positioned element in div?multicolumn css make the adjacent div in same heightDisplay css columns in horizontal order instead of verticalHow can I position four divs in a responsive manner?
A steel cutting sword?
Count rotary dial pulses in a phone number (including letters)
Python program to take in two strings and print the larger string
Can I connect my older mathematica front-end to the free wolfram engine?
Is it true that cut time means "play twice as fast as written"?
Is the field of q-series 'dead'?
Is Jon Snow the last of his House?
Can I tell a prospective employee that everyone in the team is leaving?
What is a Power on Reset IC?
Is the Indo-European language family made up?
Pirate democracy at its finest
How to cut a climbing rope?
Did 20% of US soldiers in Vietnam use heroin, 95% of whom quit afterwards?
Website returning plaintext password
Is it legal to meet with potential future employers in the UK, whilst visiting from the USA
How should I introduce map drawing to my players?
Where have Brexit voters gone?
Using credit/debit card details vs swiping a card in a payment (credit card) terminal
How to let other coworkers know that I don't share my coworker's political views?
How to deal with a colleague who is being aggressive?
Apt - strange requests to d16r8ew072anqo.cloudfront.net:80
How to respond to upset student?
How to politely tell someone they did not hit "reply to all" in an email?
Why did Theresa May offer a vote on a second Brexit referendum?
make multiple divs surround a circle at center with responsive for mobile devices
Make a div fill the height of the remaining screen spaceHow to horizontally center a <div>?Using jQuery to center a DIV on the screenHow to vertically center a div for all browsers?How to make div not larger than its contents?How to make a div 100% height of the browser window?How to center absolutely positioned element in div?multicolumn css make the adjacent div in same heightDisplay css columns in horizontal order instead of verticalHow can I position four divs in a responsive manner?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
0
I want the divs inside the div boxes to surround the circle image and I want to make this responsive for mobile display. I mean I want to view the divs surrounding circle in mobile device too. And here is my code-
<div class="circle">
<img src="images/circle.jpg height="500px" width="500px" alt="circle">
<div class="boxes">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</div>
The following is the css I used-
<style>
.circleposition:relative
.circle imgmax-width:100%; height:auto
.boxesposition:absolute; top:0; left:0
.boxes divheight:50px; width:50px; display:inline-block
</style>
html css geometry
asked Jul 1 '15 at 15:08
Sushil ThapaSushil Thapa
5810
add a comment |
0
I want the divs inside the div boxes to surround the circle image and I want to make this responsive for mobile display. I mean I want to view the divs surrounding circle in mobile device too. And here is my code-
<div class="circle">
<img src="images/circle.jpg height="500px" width="500px" alt="circle">
<div class="boxes">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</div>
The following is the css I used-
<style>
.circleposition:relative
.circle imgmax-width:100%; height:auto
.boxesposition:absolute; top:0; left:0
.boxes divheight:50px; width:50px; display:inline-block
</style>
html css geometry
asked Jul 1 '15 at 15:08
Sushil ThapaSushil Thapa
5810
1
maybe this will help? w3schools.com/cssref/css3_pr_transform-origin.asp
– aahhaa
Jul 1 '15 at 15:12
Can you include a jsfiddle/codepen of your code and an image of what your intended result might look like?
– codedude
Jul 1 '15 at 15:28
i am doing this to make a html casino table at center and players div surrounding it and responsive for mobile
– Sushil Thapa
Jul 1 '15 at 15:58
add a comment |
0
0
0
I want the divs inside the div boxes to surround the circle image and I want to make this responsive for mobile display. I mean I want to view the divs surrounding circle in mobile device too. And here is my code-
<div class="circle">
<img src="images/circle.jpg height="500px" width="500px" alt="circle">
<div class="boxes">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</div>
The following is the css I used-
<style>
.circleposition:relative
.circle imgmax-width:100%; height:auto
.boxesposition:absolute; top:0; left:0
.boxes divheight:50px; width:50px; display:inline-block
</style>
html css geometry
asked Jul 1 '15 at 15:08
Sushil ThapaSushil Thapa
5810
I want the divs inside the div boxes to surround the circle image and I want to make this responsive for mobile display. I mean I want to view the divs surrounding circle in mobile device too. And here is my code-
<div class="circle">
<img src="images/circle.jpg height="500px" width="500px" alt="circle">
<div class="boxes">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</div>
The following is the css I used-
<style>
.circleposition:relative
.circle imgmax-width:100%; height:auto
.boxesposition:absolute; top:0; left:0
.boxes divheight:50px; width:50px; display:inline-block
</style>
html css geometry
html css geometry
asked Jul 1 '15 at 15:08
Sushil ThapaSushil Thapa
5810
asked Jul 1 '15 at 15:08
Sushil ThapaSushil Thapa
5810
edited Jul 1 '15 at 15:28
Sushil Thapa
asked Jul 1 '15 at 15:08
Sushil ThapaSushil Thapa
5810
asked Jul 1 '15 at 15:08
Sushil ThapaSushil Thapa
5810
asked Jul 1 '15 at 15:08
Sushil ThapaSushil Thapa
5810
5810
1
maybe this will help? w3schools.com/cssref/css3_pr_transform-origin.asp
– aahhaa
Jul 1 '15 at 15:12
Can you include a jsfiddle/codepen of your code and an image of what your intended result might look like?
– codedude
Jul 1 '15 at 15:28
i am doing this to make a html casino table at center and players div surrounding it and responsive for mobile
– Sushil Thapa
Jul 1 '15 at 15:58
add a comment |
1
maybe this will help? w3schools.com/cssref/css3_pr_transform-origin.asp
– aahhaa
Jul 1 '15 at 15:12
Can you include a jsfiddle/codepen of your code and an image of what your intended result might look like?
– codedude
Jul 1 '15 at 15:28
i am doing this to make a html casino table at center and players div surrounding it and responsive for mobile
– Sushil Thapa
Jul 1 '15 at 15:58
1
1
maybe this will help? w3schools.com/cssref/css3_pr_transform-origin.asp
– aahhaa
Jul 1 '15 at 15:12
maybe this will help? w3schools.com/cssref/css3_pr_transform-origin.asp
– aahhaa
Jul 1 '15 at 15:12
Can you include a jsfiddle/codepen of your code and an image of what your intended result might look like?
– codedude
Jul 1 '15 at 15:28
Can you include a jsfiddle/codepen of your code and an image of what your intended result might look like?
– codedude
Jul 1 '15 at 15:28
i am doing this to make a html casino table at center and players div surrounding it and responsive for mobile
– Sushil Thapa
Jul 1 '15 at 15:58
i am doing this to make a html casino table at center and players div surrounding it and responsive for mobile
– Sushil Thapa
Jul 1 '15 at 15:58
add a comment |
1 Answer
1
active
oldest
votes
0
Try this this will work
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.divname
height: 200px;
width: 32%;
border:1px solid red;
float: left;
.notadiv
visibility: hidden;
</style>
<script>
function setwidth()
var part = (window.innerWidth / 3) - 30;
function setwidth()
var part = (window.innerWidth / 3) - 30;
alert(part.toString());
var x = document.getElementsByClassName("divname");
var i;
for (i = 0; i < x.length; i++)
x[i].style.width = part.toString();
</script>
</head>
<body onresize="setwidth();">
<div style="text-align: center;">
<div class='divname notadiv' ></div>
<div class='divname' >1</div>
<div class='divname notadiv' ></div>
<div class='divname' >2</div>
<div class='divname' style="background-image: url('images/circle.jpg');border:0px solid transparent;background-size: contain;background-repeat: no-repeat;background-position: center;"></div>
<div class='divname' >3</div>
<div class='divname notadiv' ></div>
<div class='divname' >4</div>
<div class='divname notadiv' ></div>
</div>
</body>
</html>edited Mar 24 at 2:05
Julian Schmuckli
1,56332242
answered Jul 1 '15 at 17:17
G4uKu3_GauravG4uKu3_Gaurav
476321
Yes! it worked. Thanks a lot for solving my problem. Thank you so much.
– Sushil Thapa
Jul 1 '15 at 18:31
my job @Sushil Thapa
– G4uKu3_Gaurav
Jul 1 '15 at 19:01
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f31165146%2fmake-multiple-divs-surround-a-circle-at-center-with-responsive-for-mobile-device%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Try this this will work
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.divname
height: 200px;
width: 32%;
border:1px solid red;
float: left;
.notadiv
visibility: hidden;
</style>
<script>
function setwidth()
var part = (window.innerWidth / 3) - 30;
function setwidth()
var part = (window.innerWidth / 3) - 30;
alert(part.toString());
var x = document.getElementsByClassName("divname");
var i;
for (i = 0; i < x.length; i++)
x[i].style.width = part.toString();
</script>
</head>
<body onresize="setwidth();">
<div style="text-align: center;">
<div class='divname notadiv' ></div>
<div class='divname' >1</div>
<div class='divname notadiv' ></div>
<div class='divname' >2</div>
<div class='divname' style="background-image: url('images/circle.jpg');border:0px solid transparent;background-size: contain;background-repeat: no-repeat;background-position: center;"></div>
<div class='divname' >3</div>
<div class='divname notadiv' ></div>
<div class='divname' >4</div>
<div class='divname notadiv' ></div>
</div>
</body>
</html>edited Mar 24 at 2:05
Julian Schmuckli
1,56332242
answered Jul 1 '15 at 17:17
G4uKu3_GauravG4uKu3_Gaurav
476321
Yes! it worked. Thanks a lot for solving my problem. Thank you so much.
– Sushil Thapa
Jul 1 '15 at 18:31
my job @Sushil Thapa
– G4uKu3_Gaurav
Jul 1 '15 at 19:01
add a comment |
0
Try this this will work
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.divname
height: 200px;
width: 32%;
border:1px solid red;
float: left;
.notadiv
visibility: hidden;
</style>
<script>
function setwidth()
var part = (window.innerWidth / 3) - 30;
function setwidth()
var part = (window.innerWidth / 3) - 30;
alert(part.toString());
var x = document.getElementsByClassName("divname");
var i;
for (i = 0; i < x.length; i++)
x[i].style.width = part.toString();
</script>
</head>
<body onresize="setwidth();">
<div style="text-align: center;">
<div class='divname notadiv' ></div>
<div class='divname' >1</div>
<div class='divname notadiv' ></div>
<div class='divname' >2</div>
<div class='divname' style="background-image: url('images/circle.jpg');border:0px solid transparent;background-size: contain;background-repeat: no-repeat;background-position: center;"></div>
<div class='divname' >3</div>
<div class='divname notadiv' ></div>
<div class='divname' >4</div>
<div class='divname notadiv' ></div>
</div>
</body>
</html>edited Mar 24 at 2:05
Julian Schmuckli
1,56332242
answered Jul 1 '15 at 17:17
G4uKu3_GauravG4uKu3_Gaurav
476321
Yes! it worked. Thanks a lot for solving my problem. Thank you so much.
– Sushil Thapa
Jul 1 '15 at 18:31
my job @Sushil Thapa
– G4uKu3_Gaurav
Jul 1 '15 at 19:01
add a comment |
0
0
0
Try this this will work
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.divname
height: 200px;
width: 32%;
border:1px solid red;
float: left;
.notadiv
visibility: hidden;
</style>
<script>
function setwidth()
var part = (window.innerWidth / 3) - 30;
function setwidth()
var part = (window.innerWidth / 3) - 30;
alert(part.toString());
var x = document.getElementsByClassName("divname");
var i;
for (i = 0; i < x.length; i++)
x[i].style.width = part.toString();
</script>
</head>
<body onresize="setwidth();">
<div style="text-align: center;">
<div class='divname notadiv' ></div>
<div class='divname' >1</div>
<div class='divname notadiv' ></div>
<div class='divname' >2</div>
<div class='divname' style="background-image: url('images/circle.jpg');border:0px solid transparent;background-size: contain;background-repeat: no-repeat;background-position: center;"></div>
<div class='divname' >3</div>
<div class='divname notadiv' ></div>
<div class='divname' >4</div>
<div class='divname notadiv' ></div>
</div>
</body>
</html>edited Mar 24 at 2:05
Julian Schmuckli
1,56332242
answered Jul 1 '15 at 17:17
G4uKu3_GauravG4uKu3_Gaurav
476321
Try this this will work
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.divname
height: 200px;
width: 32%;
border:1px solid red;
float: left;
.notadiv
visibility: hidden;
</style>
<script>
function setwidth()
var part = (window.innerWidth / 3) - 30;
function setwidth()
var part = (window.innerWidth / 3) - 30;
alert(part.toString());
var x = document.getElementsByClassName("divname");
var i;
for (i = 0; i < x.length; i++)
x[i].style.width = part.toString();
</script>
</head>
<body onresize="setwidth();">
<div style="text-align: center;">
<div class='divname notadiv' ></div>
<div class='divname' >1</div>
<div class='divname notadiv' ></div>
<div class='divname' >2</div>
<div class='divname' style="background-image: url('images/circle.jpg');border:0px solid transparent;background-size: contain;background-repeat: no-repeat;background-position: center;"></div>
<div class='divname' >3</div>
<div class='divname notadiv' ></div>
<div class='divname' >4</div>
<div class='divname notadiv' ></div>
</div>
</body>
</html><html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.divname
height: 200px;
width: 32%;
border:1px solid red;
float: left;
.notadiv
visibility: hidden;
</style>
<script>
function setwidth()
var part = (window.innerWidth / 3) - 30;
function setwidth()
var part = (window.innerWidth / 3) - 30;
alert(part.toString());
var x = document.getElementsByClassName("divname");
var i;
for (i = 0; i < x.length; i++)
x[i].style.width = part.toString();
</script>
</head>
<body onresize="setwidth();">
<div style="text-align: center;">
<div class='divname notadiv' ></div>
<div class='divname' >1</div>
<div class='divname notadiv' ></div>
<div class='divname' >2</div>
<div class='divname' style="background-image: url('images/circle.jpg');border:0px solid transparent;background-size: contain;background-repeat: no-repeat;background-position: center;"></div>
<div class='divname' >3</div>
<div class='divname notadiv' ></div>
<div class='divname' >4</div>
<div class='divname notadiv' ></div>
</div>
</body>
</html><html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.divname
height: 200px;
width: 32%;
border:1px solid red;
float: left;
.notadiv
visibility: hidden;
</style>
<script>
function setwidth()
var part = (window.innerWidth / 3) - 30;
function setwidth()
var part = (window.innerWidth / 3) - 30;
alert(part.toString());
var x = document.getElementsByClassName("divname");
var i;
for (i = 0; i < x.length; i++)
x[i].style.width = part.toString();
</script>
</head>
<body onresize="setwidth();">
<div style="text-align: center;">
<div class='divname notadiv' ></div>
<div class='divname' >1</div>
<div class='divname notadiv' ></div>
<div class='divname' >2</div>
<div class='divname' style="background-image: url('images/circle.jpg');border:0px solid transparent;background-size: contain;background-repeat: no-repeat;background-position: center;"></div>
<div class='divname' >3</div>
<div class='divname notadiv' ></div>
<div class='divname' >4</div>
<div class='divname notadiv' ></div>
</div>
</body>
</html>edited Mar 24 at 2:05
Julian Schmuckli
1,56332242
answered Jul 1 '15 at 17:17
G4uKu3_GauravG4uKu3_Gaurav
476321
edited Mar 24 at 2:05
Julian Schmuckli
1,56332242
edited Mar 24 at 2:05
Julian Schmuckli
1,56332242
edited Mar 24 at 2:05
Julian Schmuckli
1,56332242
1,56332242
answered Jul 1 '15 at 17:17
G4uKu3_GauravG4uKu3_Gaurav
476321
answered Jul 1 '15 at 17:17
G4uKu3_GauravG4uKu3_Gaurav
476321
answered Jul 1 '15 at 17:17
G4uKu3_GauravG4uKu3_Gaurav
476321
476321
Yes! it worked. Thanks a lot for solving my problem. Thank you so much.
– Sushil Thapa
Jul 1 '15 at 18:31
my job @Sushil Thapa
– G4uKu3_Gaurav
Jul 1 '15 at 19:01
add a comment |
Yes! it worked. Thanks a lot for solving my problem. Thank you so much.
– Sushil Thapa
Jul 1 '15 at 18:31
my job @Sushil Thapa
– G4uKu3_Gaurav
Jul 1 '15 at 19:01
Yes! it worked. Thanks a lot for solving my problem. Thank you so much.
– Sushil Thapa
Jul 1 '15 at 18:31
Yes! it worked. Thanks a lot for solving my problem. Thank you so much.
– Sushil Thapa
Jul 1 '15 at 18:31
my job @Sushil Thapa
– G4uKu3_Gaurav
Jul 1 '15 at 19:01
my job @Sushil Thapa
– G4uKu3_Gaurav
Jul 1 '15 at 19:01
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f31165146%2fmake-multiple-divs-surround-a-circle-at-center-with-responsive-for-mobile-device%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
maybe this will help? w3schools.com/cssref/css3_pr_transform-origin.asp
– aahhaa
Jul 1 '15 at 15:12
Can you include a jsfiddle/codepen of your code and an image of what your intended result might look like?
– codedude
Jul 1 '15 at 15:28
i am doing this to make a html casino table at center and players div surrounding it and responsive for mobile
– Sushil Thapa
Jul 1 '15 at 15:58