Hi Everyone, I need your help in determining the problem with my css code. I am developing this website www.skinwhitening101-intl.com . When you check my code in mobile view there is a problem with my iframe, margins and float. please really need your help. Thanks.
Care to elaborate? The entire webpage seems to be completely messed up in mobile. What exactly do you want help with? All of it?
Hi I decided to restore my previous work. I used twenty ten theme from my previous work because I can’t seem to find a way fix my code. But I will get it back to a responsive theme now. Please have it check if you have time.Thank you
That is much better, however right now I don’t see anything really wrong.
Please explain what you are having issues with. I am not a mind reader 
.
Hi I am sorry. first, I want the nav in the middle, of the site. And I am putting a violet background on it. But it seems that the background is on top of the menu.? Thank you for your help
I do see a scrollbar? Is that it?
It’s because of “.header_right”. It has a 1000px width set no matter what size screen you are on. You can probably just remove that width since I don’t see why it’s there.
Edit-you ninja’d me. One moment. Let me read your new post.
Thanks men, you save me. I forgot to tell you as we talk now I am currently modifying some codes. I’ll wait for before i do something
Yes that seems to be the problem. And in Desktop view you will see the background on top of the menu. Quite confusing for me.
Well the violet background is set as a parent of the menu. The menu takes up the entire space so the background can’t shine through.
Give .header_right some vertical padding and you’ll see some violet background on top/below the menu. Is that what you want?
Violet isn’t really a good color for this color scheme website but it’s your call.
Well i can’t resist because that’s what the client want. he wants violet. Can you give me some snippets and I will try it in my end? Really thanks for helping me.
.header_right{padding:1rem 0;}
Hi there, Thank you so much. It works perfectly. I’ll just make some adjustment later. My other problem is the margin at the left of the video in my homepage. I put a code margin-left: 30px; beside the video
There’s a 30px left margin set on each video div.
Here is an example.
<div class="business_section_3" style="float: left; width: 600px; margin-left: 30px;">
<div class="video_container">
<iframe width="600" height="450" src="https://www.youtube.com/embed/DiCH7kuUg9U" frameborder="0" allowfullscreen=""></iframe></div>
</div>
Oh, well then what is your problem? Making it disappear in mobile? Use a media query to set it to 0.
I have heard about that. Maybe I will check it now in google.
Given that my iframe with is 600px. So I need to set it like @media screen and (max-width: 600px;)?
Maybe just change it to be max-width:600px instead of width:600px.
so this is what I did:
@media screen and (max-width: 600px) {
#home_video {
width: 100%;
}
.business_section_1 {
float: left;
margin: 0 auto!important;
width: 65%;
}
.business_section_2 {
float: right;
width: 270px;
margin-right: -270px;
}
}
But nothing happens?
Why did you not just try my suggestion? Can you not modify it?