I am using SquareSpace for the building blocks of my site and creating some custom CSS to fine tune. I'm trying to get the gallery page to display the images with more height. At the moment they are not very big in the slider, especially when viewed on a large monitor, seems like there is a lot of wasted space.
Using Inspect Element, I found there to be some HTML styling the height and restricting it to 500px.
<div class="slideshow strip main sqs-gallery-design-strip rendered: id="yui_3_17_2_1_1441831607164_254" style="height: 500px; margin-top: 203:5px;">
Changing the height from 500px to 600px in Firebug works perfectly, so I tried to apply some custom code to in the SquareSpace site. I used:
.slideshow strip main sqs-gallery-design-strip rendered {
height: 600px;
}
The injection of code did not have a visible result on the page. Am I writing the CSS incorrectly? Is there something I'm missing here? Please help.. Thank you!
Try to clear your cache. Sometimes a cache does not refresh on a server.
To clear it on a site, just hit Ctrl+F5.
Your CSS rule is close. It should read:
.slideshow.strip.main.sqs-gallery-design-strip.rendered {
height: 600px !important;
}
Related
I'm working on my website, and have the main body div set to a certain width. But when I upload all my files to the web host the size of width shrinks, and no matter how I adjust the code for the div the width size stays the same(wrong size) on my published site, despite looking right when I just open the code in a browser.
I've tried Editing the code directly in the web host to see if I can even adjust the width at all. I've already tried deleting and re-uploading everything a few times.
Here's what I have on my CSS style sheet:
.body1{
max-width: 1200px;
height: 1000px;
background-color: #fffdf8;
margin: auto;
padding: 10px;
text-align: center;
border: 2px solid #f892c9;
}
<div class="body1" style="height: auto">
The width of 1200px is how big I want it to be, and it appears correctly when I open the html file in a browser. When I upload the code with a webhost the width is smaller, and even if I change it to a bigger number like 1500px it stays the small size.
EDIT: I'm publishing it with 000webhost.com. As far as I can tell there's no other CSS, only what I've uploaded for my page.
Maybe you want the atributte "width" instead of "max-width"?
max-width its usefull when you want to resize the page with a specific width.
Check the Reference CSS anyway: https://www.w3schools.com/cssref/pr_dim_width.asp
I still don't know why exactly it wouldn't work in the first place, but I finnaly decided to just cut it out of the CSS style sheet and put it with the rest of my html the old fashioned way:
Now it works.
I am building a simple web page, and it seems to keep spilling over the width of the phone no matter what I try. I have tried to add the css attributes max-width:100% and overflow:hidden to every single container in the page, and still the problem remains.
I just feel like I am overlooking some very elementary solution. Could you please help?
Edit: A link to the page is https://www.hyperoffice.com/contact-us/contact-us.php
Please add the following to the main css file of your website.
body{
height: device-height;
width: device-width;
}
Cheers !
I'm doing the first project for The Odin Project, which is recreating the Google home page. I think mine looks pretty good considering I've only been at this for a few weeks, but when I take my page out of fullscreen mode, a scrollbar appears. If you look at the Google homepage, The page itself resizes instead of using a scrollbar. Overflow:hidden obviously will just cut off the bottom of the page, so I don't want that. I'm sorry if I'm not being specific enough, but here's a link to my Github to check it out.
And if you see anything that I'm doing completely wrong or messy, I'd really love some criticism.
I haven't had a look at your GitHub, but I would suggest incorporating bootstrap, which basically lets you develop pages responsive to the screen size.
You might find this tutorial helpful:
https://www.w3schools.com/bootstrap/
After a quick look through your Github, you are setting a min-width: 500px to your all class which contans all your content. Try setting your all class width: 100% instead. This will allow your content to fill the page and adjust as the screen size adjusts.
Granted, once you get really small and content hits each-other they will break to other lines, but you would have to handle that with a media-query to adjust the size/scaling etc...
.all {
margin-left: auto;
margin-right: auto;
width: 100%;
}
Actually, all I had to do was remove all your .all styles to fix this issue. I also fixed your footer so it sticks to the bottom of the page. Finally, if you want to make the input size well, use media queries like so:
#media (max-width: 500px /* or whatever */) {
input {
width: 80%;
}
}
This will set the input's width to 80% at screen sizes 500px and smaller. Hre's a pen of what I changed: https://codepen.io/Hudson_Taylor11/pen/pemaoK?editors=0100
I'm having a few problems with the Adaptation theme for Wordpress. I installed it and optimized my blog design, and it looks amazing on mobile and tablets, but I can't stretch it to fill the whole viewport on larger desktops.
EDIT: The link provided below no longer works, but the original body{width:} was incorrectly set to 90%
Here's my blog, see what I mean? The #secondary sidebar just doesn't go all the way to the right. I've tried floating it, making the #main section go larger, (which I couldn't achieve), playing with media queries, but nothing seems to work.
My objective is to make the whole webpage a little less cluttered. Everything seems to be floated left, and it would't be a problem if it wasn't for that little sidebar :)
Changing
body.secondary-sidebar #page
{
width: 90%;
}
to
body.secondary-sidebar #page
{
width: 100%;
}
should work, you might need to adjust some of the widths etc with that change.
So I am creating a website and I've run across this issue. I have search around the internet and couldn't really find a solution to this problem even though I know sites like facebook.com does it.
I want to be able to restrict the resizing of my site's layout at a certain point. Is there some kind of CSS function which restricts the whole site's minimum width and height?
I just realized that these lines of code work:
div {
min-width:1000 px;
min-height: 1000px;
}