I'm doing Facebook Ads for a client. I only know basic HTML & CSS, enough to at least play around.
The problem is the website header section (the black background around the logo and header menus) isn't responsive and cuts off at around 950px width and gets worse the closer you get towards a mobile viewport. The website is below.
http://www.vibrantrealestate.com.au/
I've got access to WordPress and FTP so I'd really appreciate some guidance on what HTML/CSS I'd have to adjust.
Thanks Heaps!
Edit /style.css line number 92
#main-wrap {
float: left;
/* width: 100%; */
height: 100%;
}
Just comment that width: 100%
Related
Hi everyone I've got this classic problem of a large margin of white space being generated on the right side of my site. Before anyone asks yes I have tried
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
I've had zero luck. I've tried a lot of things and I can't for the life of me figure out what's wrong. I am very new to code so there's a solid chance I'm overlooking something or did something insanely stupid. At 1080p it's fine but on higher resolution displays it becomes an issue.enter image description here Here's a link to my work. https://github.com/NdigiG/Portfolio Thanks in advance for the help!
You are fixing your width in the body, header, and footer to 1920px, that is why on screens larger than 1920px, you are going to see white space.
If you want it to be responsive (dynamic) filling the whole screen, you would need to find all width: 1920px; and convert them to width: 100%;. These are in uhh.css file.
I'm fairly new to CSS responsive coding. I've used a premade boostrap template and modified it. Its working fine. The only issue is when this website is viewed on Firefox responsive design tool at different size a mysterious white space appears after the footer.
Check the screenshot below for the mysterious white space being shown when i try to view the webpage on Firefox responsive design tool at: 768x1024 . How do we remove or hide this extra space ? I have tried; overflow:hidden; but its not working. Check this Website Link for the online version of the page
Please check the image screenshot.
That space is due to the site not being 'long or tall enough' for that specific device. You can fix it by instead of using height:auto on your .wrapper element, use height:100vh.
.wrapper {
min-height: 100%;
height: 100vh !important;
margin: 0px auto -155px;
border: 1px solid #F00;
}
100vh will get the vertical height of the specific viewport that it is being used on so it will always take up the screen.
Here is a little more on Vertical Viewport Heights
Hope this helps!
It is your footer element which is at the bottom of the page.
.footer, .push {
height: 155px;
}
Also, your fix is a greasy on and won't work always:
.wrapper {
margin: 0 auto -155px;
}
Hoping that the community will be able to help me out here as I really am stuck. I've having 3 I issues with my website:
Website Link
For some odd reason - I can't get my columns to line up straight. The entire page seems to be more to the right than in the centre on both desktop and mobile
What I'm trying to do with the top image is have it take up the entire page upon loading, and then as you scroll, the image disappears. For some reason, on mobile, the image doesn't cut off and allows for the user to scroll to the right.
On mobile, I can't get the top image to show properly. It stretches vertically, and users have to scroll all the way past the photo to get to my content... I want the main image to resize like it does on a desktop browser and only take up the screen real estate when the page loads
Any advice here would be helpful...
In your projects sections - if that is where your issue is has padding on a UL tag - which is causing it to look misaligned.
You could do this to fix that section:
ul.skillssection {
padding-left: 0;
}
It'll be more helpful for the community if you made points or set up a jsfiddle.
Update - answer for number 2.
I can't seem to replicate it but I've noticed you've got:
img.bg {
min-height: 100%;
width: 100%;
min-width: 780px;
overflow: hidden;
}
I would change it to:
img.bg {
min-height: 100%;
max-width: 100%;
overflow: hidden;
}
So the max-width is always 100% and it should follow the width of the parent.
When I coded my website on my 18 inch screen, everything looks perfect! But, once I got over to my Mac (13 inch) everything just went big and the divs were crashing and everything looks extremly zoomed. I know this have something to do with sizing and the position, but I need further help.
One of the CSS it happens to are this code, is something wrong?
#client_play {
position: relative;
padding-top: 125px;
padding-left: 560px;
padding-bottom: 200px;
}
Link to page: like4fame.com/rsps/index.html
Link to my css: http://like4fame.com/rsps/css/css.css
A good starting point to resolving this issue is to remove the position: absolute, position: relative, and position: fixed styles in your code.
You also want to avoid using <center> and go with text-align: center or margin: 0 auto to center your text or div.
Removing all those styles from your code should help you achieve a better overall website fit for several screen sizes.
I also agree with jfriend00 above about reading about responsive web design.
Okay I am a bit confused here, I have recently started making templates for sale, and now usually responsive templates.
So I was making a new design that had a basic css of the following design:
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 700px;
}
.main {
width: 66%;
float: left;
}
.side {
width: 33%;
float: right;
}
Okay so this is a basic code that shows that my template is a fluid template.
And when the browser resizes it gives the responsive effect, though we all know that it is not a responsive template.
My issue here is such, that I have used some css codes to relocate content when the browser is resized. meaning that the website is now responsive too.
First of all I do not know if this is allowed as a valid website? Do I need to change the width 100% to specific widths or there is no such rule?
Second, what would I call this type of website? Since I would be selling it on ThemeForest. I don't think there is such a website that can be called both Fluid Responsive Web Template. Or is there?
And last, not always, but there are times, when I notice that the browser overflows on x axis. The content in the .side never stays in limits of 33%. Does anyone know why this might be the issue? Ill try to make out an example for that.
Thanks.
better to use bootstrap
It got everything for responsive design...
To Download it .. Please here is the link
http://twitter.github.io/bootstrap/