I’m working on a website for my business at the moment.
I’m pretty much done, but the header (inside the main but before the content div) image isn’t resizing when on mobile, meaning that the user can scroll horizontally and it totally breaks the responsiveness.
Code at https://GitHub.com/Maestoso-Digital/MaestosoWebsite, and website at https://maestoso.uk.
How can I fix this?
On a less technical side, what are your thoughts on the design? Are there any changes you would recommend making?
I’m fairly new to web design and CSS in general, so sorry if this is really basic or the design looks a bit amateurish - we’ve all got to start somewhere 😊
Thanks in advance.
Since the background is an img and not an actual background-image or even a background, set the display to block and give it a width of 100% so that the image will resize with a width of 100% based on the screen width
#header-img {
display: block;
width: 100%;
}
If you're looking for feedback and suggestions for the site, head over to ux.stackexchange you'll have more luck there
Related
I have deployed the site here. Everything works but if you scale down the page to a mobile-size, you will notice that there is a huge space at the right side of the screen. Not sure what it is? Normally, I don't have to write posts on here because somebody has asked the same question but this time I couldn't find anything.
Hoping someone can help. The HTML doesn't extend to the full page even though its styling says for it to go to 100%. Let me know if you need any other details, really hoping someone can help.
Use below CSS and remove width: 100vw !important; from html tag
img{
max-width: 100%
}
Check screenshot https://prnt.sc/1nya57a
I am trying to see if I can find a way to use CUSTOM CSS or HTML for my website's logo on Squarespace. The maximum pixel count is 320 and my logo is still small. I am trying to find a way around this by coding it. I am new to coding Custom CSS and HTML and would like some help as to how I can center my logo on each and every page at a larger pixel amount . By using an image block possibly and just centering my logo.
I have inspected your page and found your problem.
In .Header-branding-logo the max-width: 320px; made every sizing effort of yours useless since the maximum width is only 320px, which is not big enough according to you.
So, I deleted that and modified the code as follow
.Header-branding-logo {
width: 200%;
position: relative;
left: -50%;
}
So now, the logo's width is twice as much as the container top-center's width. position:relative; left:-50%; is for centering your logo.
Like Michael have mentioned in his comments, you should have provided the code replicating the problem inside your question so people could have a nicer look to invest your problem.
I am not an expert in this, but I have managed to build a website or two and have a reasonable grasp of css.
All the other pages on the website respond properly to a browser resize but on this page and only this page; http://theayurvedapractice.com/category/blog/ there is a problem.
It happens when the browser is reduced from full width.
The .site-content usually resizes when the #main.wrapper reduces in size but on this page, it remains bigger and therefore the contents stay bigger than the browser.
Any help would be much appreciated - I'm sure it's something simple (I hope!).
Thanks,
Kate
I think your answer lies in this rule.
#page {
background: white url(images/torn_paper_edge.jpg) top left repeat-x;
min-width: 800px;
}
sets minimum width of 800px to blog pages.
found in child theme style.css
hope this helps.
As the title suggest, I'm having issues with creating my website.
It's currently at the design stage and I'm having problems upon putting my browser into windowed mode.
Everything sort of re-aranges it self. If you scroll a bit you see some sections falling out of order.
I don't know what I did wrong, but I would very much like to fix this issue.
This is the link to my website as it stands:
http://www.dennis-website.co.nf/index.html
There's no minimum width set to the overall site. Your #container_main has width set at 1002px where as the rest of the site doesn't so the header and menu will collapse to the browser's width. You can quickly solve this by setting
#wrapper {
min-width: 1002px;
}
So the overall site has a minimum width.
You need to use Media queries to adjust the font size, width of the elements and much more for various screen resolutions.
Example: http://webdesignerwall.com/tutorials/css3-media-queries
You have to make a responsive design website to overcome this issue. Here is a great book on Responsive Design by Ethan Marcotte. It will cover all topics of how to make responsive grid, responsive images and media queries + this is only 150 pages small free pdf :D
<div id="nav">
Your CSS must be:
#nav
{
width:100%
}
I just finished a rough draft of a site I've been constructing. Unfortunately, I'm starting to notice how poor the design looks both on smaller resolution screens as well as when the user shrinks his/her current screen size.
The site I'm referring to can be seen here. Furthermore, the functionality I'm looking for can be seen on most any professional site, but I especially noticed it on IBM's site. When the screen is minimized the header content stays intact along with the rest of the site. I was looking for overlow: auto somewhere in their css, but I did not see it anywhere.
What can I change to fix this issue?
PS: I figured it would be easier to link to my site rather than posting code here. However, if you want some code just let me know and I'll embed something in here.
Take care,
Evan
#full-height-template-container {
width: 1300px; <----- in your app here now the width is in %
border: 1px solid #262626;
height: 515px;
margin: 0 auto 20px;
overflow: auto;
}
as you see I used the width in pixels, this way the site stays intact. if this is what you need, then it's ok.. if not, let me know and I'll see what else can be done.
IBM.com isnot doing anything noticeably different than you are.
If you want your design to be accessible and usable on different devices, you might consider responsive design. However, be sure it's worth your time. Your users might not be visiting with, say, an iPhone to make it worth your time.
Visually, what about having your menu span horizontally, instead of vertically? And also centering your image to its parent container?