I am developing a theme on my website using Thesis 2. I just modified the classic responsive theme.
I created an id using the div tag called "header-middle-sub". And here's the code that I used:
#header-middle-sub {
background-color: #6699CC;
display: table;
margin: 0 auto;
width: 897px;
}
It works great on a browser using a desktop. But since it is responsive theme, when I open the site in a tablet or mobile phone, the width occupies a fixed 897px.
If I remove this line width: 897px; the title is centered on the screen. So what is the code to retain the position of the title?
BTW, here's my website http://bit.ly/1cuTmtE.
Update:
Can anyone please visit my site and use the "inspect element" of chrome or firefox?
Here's the CSS of my header section:
.header {
margin: 0 auto;
padding: 0px;
background-color: #C4C4C4;
}
#header-top {
background-color: #7ED7F2;
}
#header-middle {
background-color: #6699CC;
border-bottom: 5px solid #0f3158;
border-top: 2px solid #0F3158;
padding: 20px 0 20px 0;
}
#header-middle-sub {
background-color: #6699CC;
display: table;
margin: 0 auto;
width: 897px;
}
#header-bottom {
background-color: #0099CC;
}
#header-container {
display: table;
margin: 0 auto;
}
Here's the layout on my theme using thesis 2.
It doesn't work for desktop too! Make your browser window very small and you will see the horizontal scrollbar. The width is always fixed.
To avoid this behavior, use the following css code:
#header-middle-sub {
background-color: #6699CC;
display: table;
margin: 0 auto;
max-width: 897px;
width: 100%;
}
Now, it will always try to stretch the div over the whole browser window, but the max-width restricts it to 897px, but less is possible, and less will be used on mobile phones or when you resize your browser window.
float: left;
read about it here :
http://www.w3schools.com/css/css_float.asp
Try to use float property: float:left;
The property text-align: left will work for this, but still it will be clear after some more details of problem or a fiddle
You should use media queries to change the width of the container based on the resolution. And by the way. The problem is that margin: 0 auto means: "get my current width and position me in the center with equal margins on the left and right. So, if you want to use margin then you need media queries to dynamically change the container's width.
Related
I have a problem with overflow-auto. This property is working very well in laptop/desktop but it is not working on mobile devices.
https://bdevg.com/articles/Testing%20overflow%20in%20mobile%F0%9F%8F%83%E2%80%8D%E2%99%80%EF%B8%8F%205f9a2c91f4c1090008e5237f
Open the above page in mobile view or on any mobile device. You can notice this add a scrollbar at the bottom of Overflow...Overflow...Overflow...Overflow...Over.... in laptop/desktop view. But, it doesn't add the same scrollbar at the bottom of Overflow...Overflow...Overflow...Overflow...Over.... in mobile view, instead, it makes the whole page scrollable including header and footer.
.tui-editor-contents pre {
margin: 2px 0 8px;
padding: 18px;
overflow: auto;
background-color: #f5f7f8;
}
This code adds overflow scroll property. You can edit the in-browser dev console.
Thanks for your time.
You need to give your class="MuiContainer-maxWidthSm" a default value
.MuiContainer-root {
max-width: 600px;
}
TRY THIS
.tui-editor-contents pre {
margin: 2px 0 8px;
padding: 18px;
overflow: auto;
background-color: #f5f7f8;
hieght:100%;
width:100%;
}
i'm trying to get my onepager to work. But sadly i have bug with my css.
If i try to scale the width of my browser below the width of my content a scrollbar appears. When i use the scrollbar and scroll to the right, i see my background color does not resize to the actually width. I don't want my website to be responsive or don't want to use any mediaqueries. Just basic stuff with a bug ;)
I took a screenshot to show what i mean:
Here is my website: Website
Just to make sure everyone understand HOW i mean the scrollingpart:
Remove your fix width properties e.g
style.css: 144
#header {
height: 95px;
/* width: 1200px; */ //Use percentages and media query to control width
margin: auto;
}
.section-wrapper {
width: 1200px; //Here use media queries and better to use % instead of px
padding: 50px;
margin: auto;
}
section#one>.section-wrapper:after {
content: url(img/leaf.png);
/* height: 152px; */
/* width: 331px; */
display: block;
/* position: absolute; */
margin: -57px 0 0 700px; // Do not use margin 700px instead position it on right and add right padding or distance.
}
after setting width to 100% in .section-wrapper the text stop clipping
Edit #2:
By removing the padding: 50px; from .section-wrapper in #one section and leaf part i got this result
I'm building a website using a grid system as the framework. At first I had no problems with margins and padding, but now I have extra white space on the right side of my website.
Here is my fiddle: http://jsfiddle.net/071ad2hg/1/
I already found the problem and it is from the following code:
.grid_12 { width: 100%; }
When I comment out this line the problem goes away, but I've used it in many places throughout my site and am wondering why this is happening all of a sudden. I would like to keep it as is and just fix it somehow.
Beacuse body has 8px margin you can change that by adding margin 0 to body css tag
demo http://jsfiddle.net/ckqkyaqd/
body {
font-family: 'elegant_luxmager';
color: #444948;
margin:0;
}
Add this to your body in the css.
margin: 0;
and set a pixel width for your grids.
.grid_12 {
width: 1000px;
margin: 0 2% 1% 0;
float: left;
display: block;
}
I would suggest using a .wrapper instead.
.wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
<div class="wrapper"></div>
Found your issue:
It's the 25% margin that adds the whitespace, use a wrapper to center that part or use <center>
#images_row_1, #images_row_2, #images_iOS {
margin-left: 25%;
}
Use the inspector in Google Chrome developer tools and see the order in which the CSS is being applied. You have this additional margin which is being applied to the div. Try using a wrapper div or better yet use a defined responsive framework like Bootstrap or Foundation.
#images_row_1, #images_row_2, #images_iOS {
margin-left: 25%;
}
I would like to position 8 divs in the following way:
Here is my JSfiddle which has all the div code: http://jsfiddle.net/XRTh5/
What I would like to do is make the div's behave the same way as on this website with it's icons" http://cyberdust.com/. See how when you re-size the page, the icons shrink and get smaller instead of not changing?
Thanks for the help. I would like to do this only using `div's and not using tables or any old technology like that.
Strongly suggest you look at using a framework to accomplish this just as the reference website uses.
But in general it can be accomplished with css and the #media (min-width: 768px) {}
which applies different css styles when the browser viewpoint/window is resized.
There are a couple but for your specific need they use bootstrap.js http://getbootstrap.com/
Use float: left; to float your items, and percentage based widths for a layout that scales.
Remove heights from your container elements to allow them to expand and fit their contents.
Example: http://jsfiddle.net/XRTh5/37/
The site that you referenced uses media queries to adjust styles based on window width. That would also work, but percentages may be a simpler way of achieving your desired result.
UPDATE: using a neat little trick with percentage-based padding and position: absolute, you can cause the grid items to maintain an aspect ratio. See fiddle link above.
The example website you posted is using breakpoints to set the size of the icons to specific values depending on the size of the users viewport.
read up on media queries and you should be able to replicate this very easily.
You could also set the size of your icons to a percentage value rather than a fixed width or height and this would scale dynamically but will not re-flow very gracefully.
Something else to investigate is flexbox as this will flex to fit the available space quite nicely but isn't 100% supported on all browsers.
Hope this helps
if you don't need the gap in between the the rows then a few simple tweaks to your css will do:
.main {
display:table;
border-spacing:50px;
}
.row {
display:table-row;
}
.icon {
display:table-cell;
}
Example
Otherwise you just need to add and extra closing and opening main div to get the middle gap:
If you do need the gap in the middle
You need to add the following CSS:
* { box-sizing: border-box; } //border will not add to element width
.icon {
width: 25%;
height: 150px;
background-color: orange;
border: 1px solid black;
float: left; //objects will sit next to eachother
}
Also, you way want to set this all up using % values for width/height so that you can get the responsive resizing effect
In answer to your first question, how to make the div, use float:left on the icons to make them fit horizontally.
Use relative width's to make them shrink. To make them shrink and realign perfectly, you need to use media queries, which I'll not go into right now. Here's the updated css
.main {
height: 400px;
width: 100%;/*relative widths*/
background-color: green;
}
.row {
width: 100%;/*relative widths*/
background-color: blue;
}
.icon {
width: 20%;/*relative widths*/
height: 120px;
background-color: orange;
border: 1px solid black;
float:left;/*fit horizontally*/
}
.row{
clear:both;/*To stop the icons from floating*/
}
jsfiddle: http://jsfiddle.net/mDtjP/
I think that is what you need
.row div{
float:left;
}
Just float de divs
http://jsfiddle.net/XRTh5/15/
try this DEMO i change you code
.main {
background-color: green;
display:inline-block;
}
.row {
background-color: blue;
padding:5px;
}
.icon {
width: 200px;
height: 150px;
background-color: orange;
border: 1px solid black;
display:inline-block;
}
You should set float: left like here: http://jsfiddle.net/XRTh5/10/
.icon {
width: 198px;
height: 150px;
background-color: orange;
border: 1px solid black;
float: left;
}
Also remember about decreasing div size to 198px if you want to fit them in 800px (you have 2px border).
Strangly enough, my website is rendering fine in Internet Explorer but fails in Mozilla based browsers.
Here is a screenshot:
Does anyone see why "right-panel" does not go all the way to the right? You can see how it is not lined up with the right edge of "top-panel":
#container
{
margin: 0 auto;
width: 750px;
background-color: #ffffff;
}
#top-panel
{
padding-left: 10px;
background-color: #000000;
text-align: left;
width: 100%;
height: 88px;
}
#left-panel
{
padding-top: 10px;
text-align: center;
background-color: #ffffff;
border-right: 1px dashed #000000;
float: left;
width: 250px;
}
#right-panel
{
background-color: #ffffff;
float: right;
width: 449px;
}
.clear
{
clear:both;
line-height:0;
}
If anyone wants to see the actual site it is: Math Relay
When you apply width:100% and use padding-left:10px also, it computes the width first, and then applies the padding, so actually your #top_panel CSS declaration is the problem. Try setting it to a fixed width for that.
it is the padding-left:10px; in the #top-panel
Set that to 0 and you'll see them line up.
Try using FireBug, that's how i found the issue.
The Padding-Left:10px is causing an extra 10 pixels to appear on the right hand side.
Along the lines of the other answers, but hopefully explaining what's happening behind the scenes, too:
The width: 100% on #top-panel refers to the width of the div's content area, excluding borders, padding and margin. Thus, when you specify both width: 100% and padding-left: 10px the width of #top-panel including padding is actually 10px + 750px (the padding plus 100% of the width of #container.)
The best solution in my opinion is to remove width: 100% from #top-panel. This will make the div take up the entire width of the parent element withut overflowing the #container.
The page looks ok in Internet Explorer since IE incorrectly includes padding and border when calculating the width of the div if the page is rendered in quirks mode. More details about this bug can be found here.
It's your #top-panel that's 10px bigger that your #container because of your padding-left: 10px;
Just add 10px to your #container and it will be good.
Remove the width: 100% from #top-panel.