I have a webpage made by me. There are few contents in it which are looking different on different screens (eg: mac and windows).
When I am trying to open the same webpage on my DELL laptop(Windows 10), there are few things which are looking different on another screen size computers.
On different screen size computer; the boxes section, the "See More" text, and the "Sales" text currently looks like this(which is not I want):
"See More" text
"Sales" text
Boxes section:
And the same link, when I am trying to open on my desktop which has bigger screen, it is looking in this way(which is I want):
Boxes section:
"See More" text:
"Sales" text:
I am wondering, what changes do I need to make in my CSS so that it looks same on different screens.
The CSS code which I am using for the boxes are:
.company-heads {
margin-left: 300px;
padding-top: 80px;
font-style: italic;
margin-right: 289px
}
.company-heads .rectangle {
border-radius: 10px;
display: inline-block;
margin-bottom: 30px;
margin-right: 22px;
width: 355px;
height: 100px;
border: 1px solid #000;
background-color: white;
padding: 10px 10px 10px 100px;
position: relative;
}
.company-heads .rectangle .circle {
background: #aaa;
border-radius: 100%;
height: 60px;
width: 60px;
position: absolute;
top: 20px;
left: 20px;
}
You can do this by giving the parent container, .company-heads, in this case, a max-width! Looks like, .company-heads { max-width: 1140px; } will do the job. Let me know if this doesn't solve your problem!
Related
I've never had this problem before, but for some reason, my 'overflow: auto' tags are not working correctly. They show scrollbars, but I can't actually scroll the scrollbars. The scrollbar appears if a section is larger than the height of the container, as it should, but the actual scrolling capability is defunct. It's as if the scrollbar is simply frozen and won't move. I've searched across the internet for why this may be happening, and couldn't find an appropriate solution. I also tried removing the 'overflow: hidden' from my parent element, thinking that it may somehow be affecting the entire code, but removing that elicited no effect whatsoever. I've also double-checked that everything has a width and height, since I know that missing those can adversely affect an overflow. I also checked the positioning of each item. (And I also know it isn't just my mouse messing up because scrolling on other sites/pages is perfectly fine)
I'm frustrated and entirely at a loss at this point, so I'm hoping extra sets of eyes may spot something that I'm missing.
Here is my project: https://codepen.io/royalstandard/pen/RwMxrLB
Main container -
.ldmainprofile {
width: 1100px;
height: 1400px;
padding: 0px;
background-image: linear-gradient(80deg, rgba(163,135,135,1.0), rgba(163,135,163,1.0));
border-radius: 15px;
position: relative;
overflow: hidden;
z-index: -10;
}
The first "frozen" container -
.basics {
height: 300px;
width: 270px;
border: 20px solid rgba(92,65,92,0.6);
background-color: #CCC;
border-radius: 10px;
position: absolute;
margin: 20px;
}
.basics ttl {
display: block;
font-family: aclonica;
font-size: 22px;
height: 22px;
width: 250px;
text-align: center;
padding: 20px 10px 10px 10px;
border-bottom: 1px dotted #888;
color: rgba(92,65,92,0.8);
}
.basicscroll {
height: 247px;
width: 240px;
background-color: #FF7777;
padding: 0px 15px;
overflow: auto;
}
.basics cat {
display: block;
font-family: poppins;
font-size: 15px;
text-align: left;
margin: 10px 0px 10px 10px;
color: rgba(92,65,92,0.6);
letter-spacing: 1px;
text-decoration: underline rgba(92,65,92,0.3) 4px;
}
The sections being affected so far are ".basicscroll" (currently coded with peach color as I do to clearly see what I'm working on) and ".info2 trig" at the bottom.
Having an issue I don't understand. The only way I've been able to center a button on my page perfectly across all devices is if I apply a width: 100% to it.
Issue with this however, is it then makes a sprawling button, way too wide. I'd like to cut it down. The problem is, anytime I get rid of the width: 100% in any way, it makes the perfect button position go haywire.
Any thoughts on how I can have my button centered, but also not super wide and sprawled out. Thank you. -Wilson
link to site: http://www.wilsonschlamme.com/test3.html?
CSS:
img {
width:100%;
max-width:500px;
max-height:340px;
box-shadow: 5px 5px 5px grey;
border-style: groove;
border-width: 1px;
position: absolute;
top: 107px;
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
width: 100%;
position: relative;
top: 600px;
}
#ShowText{
width: 800px; /* change to your preferences */
overflow:hidden; /* older browsers */
position: absolute;
margin-top: 500px;
text-align: center;
margin-left: -140px;
font-size: 18px;
font-family: vendetta, serif;
line-height: 25px;
}
h1{
position: absolute;
top: 5px;
font-size: 250%;
width: 800px; /* change to your preferences */
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
#wrapper {
width: 500px;
margin: 0 auto;
}
take a look at this site there's a complete guide to centering a div.
http://www.tipue.com/blog/center-a-div/
I don't know what's your base using absolute positioning for mostly of your element, but to answer your issue, give text-align:center; to #wrapper, then give text-align:left for each of #wrapper children, except the button.
The Kendo Splitter has a collapsible property that I want to use. However, the icon is a very small arrow that isn't intuitive at all, the users can barely see it. Even when they know it's there, the icon is so small that clicking it takes some time as hovering such a tiny icon is not that fast.
I want to make it bigger. I managed to enlarge the divider itself
.k-splitbar.k-splitbar-horizontal{
width: 20px;
}
but not the small icon.
I found this post from a user with the exact same issue as me but the solutions there don't work and the user hasn't given any feedback on them.
As stated you can ovveride the rules and here is the description of all the rules for a flat theme
.k-splitbar-horizontal .k-resize-handle {
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -330px -573px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal-hover > .k-resize-handle {
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -360px -573px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal .k-icon.k-expand-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -331px -389px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal .k-icon.k-collapse-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -331px -454px;
width: 20px; height: 20px;}
.k-splitbar-horizontal-hover > .k-icon.k-expand-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -361px -389px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal-hover > .k-icon.k-collapse-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -361px -454px;
width: 20px; height: 20px;
}
.k-splitbar.k-splitbar-horizontal{
width: 15px;}
I know 5 years is too late but if someone is struggling with this, here is my solution in SASS.
.k-splitbar{
.k-i-arrow-60-left, .k-i-arrow-60-right{
z-index: 100000;
position: relative;
background: #ccc;
border-radius: 0 10px 10px 0;
bottom: -32px;
left: 20px;
width: 34px;
height: 30px;
font-size: 30px;
}
}
This works for horizontal panes, you can follow similar strategy for vertical ones.
It has been a few days that I am learning CSS and html. I am trying to build a website and my content container works ( is displayed) exactly how I want it on my 17inch laptop. However when i move it to my desktop in moves to the left and comes down to the bottom.
How do i make an element change in accordance to the resolution of a screen.
/* Entire drop-up menu, show on mouse hover */
#footer_menu li:hover .one_column_layout,
#footer_menu li:hover .two_column_layout,
#footer_menu li:hover .three_column_layout
{
display: block;
position: absolute;
margin: auto;
bottom: 40px;
border: 1px solid #111111;
border-radius: 7px 7px 0px 0px;
background: rgba(0,0,0,0.5);
bottom: 90px;
left: 500px;
width: 500px;
padding-left: 50px;
padding-right: 54px;
font-size: 12px;
left: 400px;
}
There are many things to take account to build a responsive site, but the first is about not fixing width in pixels, but in % and/or use media queries.
I've coded my website for all browsers but of course IE has issues. Specifically only IE 7. I'm hoping to find a resolution to why it's behaving the way it is with two issues and what I can add so IE will display it properly.
My submit buttons are aligning to the bottom of their containing divs.
CSS for the SUBMIT button for the SEARCH field
#searchform { /*container widget */ position: relative; left: 15px; width: 97%; height: 30px; background-color: #f3f3f3; border: 2px solid #742222;}
#searchform label { display: none; }
#searchform input#s { width: 75%; height: 20px;}
input[type=text],input#s { margin: 0 10px 0 0; width: 60%; }
#searchsubmit{ position: relative; float: right; width: 30px; height: 30px; text-indent: -999px; background: url(http://averylawoffice.ca/img/SEARCH-submit.jpg) center; border: 0px;}
This CSS works in all browsers but IE version 7. Is there a way to make it top align without having to position absolute?
I've managed to move the SUBMIT button up (to the correct position) by left-floating the text-box.
.subscription_email {
...
float: left;
}
Same goes for the search text-box:
#s {
...
float: left;
}
By making those changes, the resulting presentation will be exactly the same as in Firefox.