Mobile frontend has a bug: container is not fixed

Multi tool use
I suck at mobile frontend / responsiveness. Could someone tell me why the overall container of my webapp is not fixed but slides around when you move it?
I hope you get my question but you can basically move the whole page front left to right.
here ist the page: www.frankfurtstartupjobs.com
I am sure it is something simple, as of again I suck at mobile / css.
Thanks a lot in advance!
css ruby-on-rails responsive-design frontend
add a comment |
I suck at mobile frontend / responsiveness. Could someone tell me why the overall container of my webapp is not fixed but slides around when you move it?
I hope you get my question but you can basically move the whole page front left to right.
here ist the page: www.frankfurtstartupjobs.com
I am sure it is something simple, as of again I suck at mobile / css.
Thanks a lot in advance!
css ruby-on-rails responsive-design frontend
Hmmm, I'd recommend you not to use negative margins. You have a lot of margins and paddings on almost every element and it's really messed up, the easiest workaround is to set overflow: hidden on the.row
with the list of vacancies but the actual fix would be to simplify the margins and paddings (usually, if you have a padding on a parent and negative margins on it's children, that's a bad smell). Also the thefigure
element with the quote, the margin is also out of place. If you simplify the margins/paddings the issue will be gone.
– arieljuod
Dec 27 at 14:04
Okay, the "overflow: hidden" trick on the .row did not work. I agree that the overall css policy is very messy. Major learning for the upcoming work. I was wondering if there was a simple fix to this. As otherwise I will have to review every single element..
– Sabrina
yesterday
add a comment |
I suck at mobile frontend / responsiveness. Could someone tell me why the overall container of my webapp is not fixed but slides around when you move it?
I hope you get my question but you can basically move the whole page front left to right.
here ist the page: www.frankfurtstartupjobs.com
I am sure it is something simple, as of again I suck at mobile / css.
Thanks a lot in advance!
css ruby-on-rails responsive-design frontend
I suck at mobile frontend / responsiveness. Could someone tell me why the overall container of my webapp is not fixed but slides around when you move it?
I hope you get my question but you can basically move the whole page front left to right.
here ist the page: www.frankfurtstartupjobs.com
I am sure it is something simple, as of again I suck at mobile / css.
Thanks a lot in advance!
css ruby-on-rails responsive-design frontend
css ruby-on-rails responsive-design frontend
asked Dec 27 at 13:36


Sabrina
62
62
Hmmm, I'd recommend you not to use negative margins. You have a lot of margins and paddings on almost every element and it's really messed up, the easiest workaround is to set overflow: hidden on the.row
with the list of vacancies but the actual fix would be to simplify the margins and paddings (usually, if you have a padding on a parent and negative margins on it's children, that's a bad smell). Also the thefigure
element with the quote, the margin is also out of place. If you simplify the margins/paddings the issue will be gone.
– arieljuod
Dec 27 at 14:04
Okay, the "overflow: hidden" trick on the .row did not work. I agree that the overall css policy is very messy. Major learning for the upcoming work. I was wondering if there was a simple fix to this. As otherwise I will have to review every single element..
– Sabrina
yesterday
add a comment |
Hmmm, I'd recommend you not to use negative margins. You have a lot of margins and paddings on almost every element and it's really messed up, the easiest workaround is to set overflow: hidden on the.row
with the list of vacancies but the actual fix would be to simplify the margins and paddings (usually, if you have a padding on a parent and negative margins on it's children, that's a bad smell). Also the thefigure
element with the quote, the margin is also out of place. If you simplify the margins/paddings the issue will be gone.
– arieljuod
Dec 27 at 14:04
Okay, the "overflow: hidden" trick on the .row did not work. I agree that the overall css policy is very messy. Major learning for the upcoming work. I was wondering if there was a simple fix to this. As otherwise I will have to review every single element..
– Sabrina
yesterday
Hmmm, I'd recommend you not to use negative margins. You have a lot of margins and paddings on almost every element and it's really messed up, the easiest workaround is to set overflow: hidden on the
.row
with the list of vacancies but the actual fix would be to simplify the margins and paddings (usually, if you have a padding on a parent and negative margins on it's children, that's a bad smell). Also the the figure
element with the quote, the margin is also out of place. If you simplify the margins/paddings the issue will be gone.– arieljuod
Dec 27 at 14:04
Hmmm, I'd recommend you not to use negative margins. You have a lot of margins and paddings on almost every element and it's really messed up, the easiest workaround is to set overflow: hidden on the
.row
with the list of vacancies but the actual fix would be to simplify the margins and paddings (usually, if you have a padding on a parent and negative margins on it's children, that's a bad smell). Also the the figure
element with the quote, the margin is also out of place. If you simplify the margins/paddings the issue will be gone.– arieljuod
Dec 27 at 14:04
Okay, the "overflow: hidden" trick on the .row did not work. I agree that the overall css policy is very messy. Major learning for the upcoming work. I was wondering if there was a simple fix to this. As otherwise I will have to review every single element..
– Sabrina
yesterday
Okay, the "overflow: hidden" trick on the .row did not work. I agree that the overall css policy is very messy. Major learning for the upcoming work. I was wondering if there was a simple fix to this. As otherwise I will have to review every single element..
– Sabrina
yesterday
add a comment |
1 Answer
1
active
oldest
votes
If you are talking about page is moving around when we drag it then here is solution
look for class container_header
in your html page and add container
class to it
this will fix your issue
I did try this. Unfortunately it still moves around when being dragged.
– Sabrina
yesterday
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
});
}
});
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%2f53945994%2fmobile-frontend-has-a-bug-container-is-not-fixed%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
If you are talking about page is moving around when we drag it then here is solution
look for class container_header
in your html page and add container
class to it
this will fix your issue
I did try this. Unfortunately it still moves around when being dragged.
– Sabrina
yesterday
add a comment |
If you are talking about page is moving around when we drag it then here is solution
look for class container_header
in your html page and add container
class to it
this will fix your issue
I did try this. Unfortunately it still moves around when being dragged.
– Sabrina
yesterday
add a comment |
If you are talking about page is moving around when we drag it then here is solution
look for class container_header
in your html page and add container
class to it
this will fix your issue
If you are talking about page is moving around when we drag it then here is solution
look for class container_header
in your html page and add container
class to it
this will fix your issue
answered Dec 27 at 14:00
Rahul
2,987159
2,987159
I did try this. Unfortunately it still moves around when being dragged.
– Sabrina
yesterday
add a comment |
I did try this. Unfortunately it still moves around when being dragged.
– Sabrina
yesterday
I did try this. Unfortunately it still moves around when being dragged.
– Sabrina
yesterday
I did try this. Unfortunately it still moves around when being dragged.
– Sabrina
yesterday
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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%2f53945994%2fmobile-frontend-has-a-bug-container-is-not-fixed%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
FfeNYBCU9PmV2YVNq g9chiJkZgcVc,zDlUJRMa,Y4jLBJccqLWeOIpOcxlVt2,sUSC,qANBz3pXGy,9Mk p4 aEanKHtn,tHrM5,sb
Hmmm, I'd recommend you not to use negative margins. You have a lot of margins and paddings on almost every element and it's really messed up, the easiest workaround is to set overflow: hidden on the
.row
with the list of vacancies but the actual fix would be to simplify the margins and paddings (usually, if you have a padding on a parent and negative margins on it's children, that's a bad smell). Also the thefigure
element with the quote, the margin is also out of place. If you simplify the margins/paddings the issue will be gone.– arieljuod
Dec 27 at 14:04
Okay, the "overflow: hidden" trick on the .row did not work. I agree that the overall css policy is very messy. Major learning for the upcoming work. I was wondering if there was a simple fix to this. As otherwise I will have to review every single element..
– Sabrina
yesterday