Mobile frontend has a bug: container is not fixed

Multi tool use
Multi tool use












0














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!










share|improve this question






















  • 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
















0














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!










share|improve this question






















  • 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














0












0








0







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!










share|improve this question













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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










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 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


















  • 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
















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












1 Answer
1






active

oldest

votes


















0














If you are talking about page is moving around when we drag it then here is solution



enter image description here



look for class container_header in your html page and add container class to it



this will fix your issue






share|improve this answer





















  • I did try this. Unfortunately it still moves around when being dragged.
    – Sabrina
    yesterday











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


















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









0














If you are talking about page is moving around when we drag it then here is solution



enter image description here



look for class container_header in your html page and add container class to it



this will fix your issue






share|improve this answer





















  • I did try this. Unfortunately it still moves around when being dragged.
    – Sabrina
    yesterday
















0














If you are talking about page is moving around when we drag it then here is solution



enter image description here



look for class container_header in your html page and add container class to it



this will fix your issue






share|improve this answer





















  • I did try this. Unfortunately it still moves around when being dragged.
    – Sabrina
    yesterday














0












0








0






If you are talking about page is moving around when we drag it then here is solution



enter image description here



look for class container_header in your html page and add container class to it



this will fix your issue






share|improve this answer












If you are talking about page is moving around when we drag it then here is solution



enter image description here



look for class container_header in your html page and add container class to it



this will fix your issue







share|improve this answer












share|improve this answer



share|improve this answer










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


















  • 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


















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.





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.




draft saved


draft discarded














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





















































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
Ul YYMSbdKSE NOVfDLVE6h FzA9b zJIHkiJq4,hQQPkWi9ntfpXi8c65a1wDXlTSl LkYi1aweN3 0PU3vtnNvOHl

Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas