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/
Related
I'm trying to insert basic html (local file) into a parent html. From my previous question I concluded that jquery load might never work in prod so I attempted to use iframe as per Makesh Keshu's suggestion. It sort of does what I want, but now I'm running into some styling issues? Since the local file I'm trying to embed is just text essentially, I want it to just look like the parent html holds the text (aka responsive sizing and all) -- motivation for embedding the html and not just writing it in directly is mainly because the site owner wants to try to make the text entry not "steal-able" from just doing inspect and copying the text away.
My css right now uses an iframe wrapper class that does the usual that everyone else suggests:
.text-wrapper {
position: relative;
padding-bottom: 100%;
padding-top: 100%;
height: 0;
overflow: hidden;
}
.text-wrapper iframe {
position: absolute;
border: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
However, I suspect due to the aspect ratio from the padding attributes, it looks great when my screen is in split-screen view or on mobile, but when I resize the screen to full screen, there is a lot of white space under all the text to keep the container at roughly the half-screen-view aspect ratio. (Please correct me if this assumption is wrong -- I'm still a beginner with front-end.)
Basically, I want to try to make the aspect ratio of the iframe container the same as the ratio of the tab/window/screen -- which changes as window resizes and whatnot.
I looked through this question because it seems similar, but I'm neither sure I understand the idea behind the answer very well nor am I sure it really answers my question. That question I think is asking to size the iframe-container according to the content size without using a fixed aspect ratio, which would achieve the same thing, but I'm trying to see if I can just make the aspect ratio responsive based on the "screen"(window?) ratio.
This article ended up working really well for my specific purposes. I'm not sure I 100% understand the theory behind it yet, but it uses a pseudo-element. It seems to have solved my problem of having extraneous whitespace in the iframe container in full-screen, but I'm not sure if it solves the general issue (for people who want to try the method out).
The css code I ended up using (for the container, css for iframe remains the same):
.aspect-ratio-box {
background: white;
}
.text-wrapper::before {
content: "";
width: 1px;
margin-left: -1px;
float: left;
height: 0;
padding-top: 52.46%;
}
.text-wrapper::after {
content: "";
display: table;
clear: both;
}
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%
can anyone find the solution to my problem? I've beed tweaking my CSS sheets and it doesnt seem like its changing anything. I'm using the same rules for the "4sites" image as to my "About" img.
Heres a link to the site, you can see all of my css sheets from there too.
https://dl.dropboxusercontent.com/u/146014194/483F_ss14/Pro01/hwk/pro01_content_structure_presentation_B02_responsive_4sites_FINAL.html
I know you can create everything in just one CSS sheet, but my professor asked us to make it like the way it is..
I added a div tag around the img thinking that I could control it better.. But it doesnt seem like its the case!
Mucho Thanks!
You're trying to keep the height of image as 100%. If this is a responsive design then, the width has to be 100% and height to be kept as auto
CSS:
#Mybio #Mepic img {
clear: none;
float: left;
height: auto;
width: 100%;
margin-bottom: 100px;
margin-top: 55px;
}
Now the question is, the image is taking the whole width of the screen, well, that's normal. You have to restrict the parent div(id as #Mepic) and handle it with media queries for different screen sizes. Also I saw float issues on you're site. Use Clear:both to get rid of them.
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.
I'm writing a website with HTML and CSS. My problem is that when I for example run my website in my browser, I adjust all the margins with percent. But then when I run my browser in fullscreen or if I adjust the size of the window the websites different parts fall apart and doesn't fit together as they should. Why doesn't the percent unit fix that problem since it's relative to the size of the window?
CSS:
#aboutMeDiv
{
background-image: url('noisyBlue.png');
position: absolute;
width: 100%;
height: 118px;
margin-top: 13.6em;
margin-left: -0.7%;
opacity: 0.5;
transition: opacity 0.3s;
}
How can I make it "the same way" even if the window changes?
Thanks!
A more precise answer cannot be given without seeing your code, but this issue can probably be solved by adding a min-width and max-width to your container element.
For example, if the structure seems to fall apart when the width is less than 700px and when it is greater than 1500px, you could use this:
.container {
max-width: 1500px;
min-width: 700px;
}
Of course, this might inhibit responsive design -- especially for mobile browsers. It may be a good idea to check out some already-made CSS frameworks like Twitter Bootstrap and Gumby Framework.
Edit following addition of code to the question:
How can I make it "the same way" even if the window changes? Thanks!
If you want #aboutMeDiv to be "the same way" even if the window size changes, you should use concrete numbers instead of percentages of the div size; i.e. change width: 100%; to a something like width: 700px;. Then, as noted above, you can use a min-width to make sure the screen shows all the content within the div.