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.
Related
I am using Elementor header and footer kit for my Elementor page, but I don't know why the header and footer are streching more than it should be in mobile screen can't find out what css class making it
https://englanderdavis.com/elementor-37378/#Ebook
EDIT NOTE: I realized this is not for the entire header, when I looked at it on a mobile device, I noticed the image was the cause of my eyesore and addressed it. sorry for this as I realized after re-reading your question, that the issue was the entire header...
it seems that Elementor has a max width that could be too big for the specific image you are trying to work with. Sorry for the long time to answer, there was a lot of code to look through.
/wp-content/uploads/elementor/css/post-34690.css?ver=1628743150
try setting the size to something else like 20% or it is currently set to 29%. you will have to play with it as I cannot reproduce all the files and test that would take me far too long.
This is the part you are looking to change the max-width
.elementor-34690 .elementor-element.elementor-element-9837492 .elementor-image img {
width: 51%;
max-width: 29%;
height: 45px;
}
You could also make the image more to the size you are looking for and remove the
class="elementor-image" from:
<div class="elementor-image">
altogether at line 1177.
However the image will be the same relative size (in this case in both positions by your size references depending on device) for that image on all devices. meaning you would have to resize for the desktop.
Note: although a program like Elementor makes things easier to create, it also convolutes the code with a lot of unnecessary entries and code that seemingly intentionally makes it hard for others to read or troubleshoot. with that being said, I can only get you pretty close.
Unfortunately I cannot put too much more into this due to that and hopefully I got you on the right track:).
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
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.
Hi I'm trying to create a Responsive Email Template.
I can't make the background images responsive.
Here is a sample of the images code:
a#learn-more { background-size: 100%; display: block; background: url('http://tophitechgadgets.com/wp-content/uploads/2013/11/learn-more.png')no-repeat; height: 68px; width: 600px; margin: 0 auto; }
Basically We have the following images that I am having a hard time making fluid (responsive)
-logo (a#learn-more)
-banner image (.banner-img)
-learn more button (a#learn-more)
-image1 and image2
I have my demo here: http://jsfiddle.net/nLxjU/3/
Hope you can edit the code to see what my issue why I cant make them responsive.
I'm really stuck here.
You can use a different div with absolute positioning, and containing the image inside it with percentile width and height, so when the screen size changes, the div (and the image inside it) resizes, too. Just place the div below everything with z-index and you're done.
Email-clients, like Outlook (-Express), Mail (OSX) etc, all use different html-engines, and have a lot of restrictions. Especially Outlook seems to be using a limited IE6 based rendering engine. Background images and styling by css classes don't work, and forget about absolute or relative positioning.
Make sure the template also looks good in these email-clients, unless you only aim at mobile email clients (they seem to support all of this).
Take a look at the standards guide (html/css) at http://www.emailology.org/.
You can improve with the following, but as #Willem says you really need to change your approach if making an email template. Many email clients completely remove the head and strip out styles. Some support a limited set of inline styles for formatting and none for layout. In fact an old-school table layout with inline styles is generally the best way to go.
You might find some of this useful: http://www.campaignmonitor.com/guides/mobile/
As for making the best of what you've got so far:
Your .divider and .banner-img elements were set to 600px wide.
Set them as 100%.
Don't have the banner as a background image.
Size your .lpanel and .rpanel images as 100% of the parent's
width.
Demo: http://jsfiddle.net/nLxjU/
I'm making a small website and I'm very new to CSS but whenever I change the size of the webpage I'm working on nothing stays relative to the size of the screen it's being displayed on. For example, I have text on the right, if I increase my browser size by maximising the text on the right stays in place and is now in the centre of the browser.
One of my images is moving with the webpage size being increased and decreased by dragging the corner of the browser. I use the same CSS code for that image on my hyperlinks list, text box or text in general and it doesn't work at all.
I've researched high and low, I've found some stuff on it but nothing seems to work. I'm getting so frustrated, my site is also local so I cannot even share the link. If anyone doesn't understand what I mean I'll try re-explain it's just quite hard to explain the issue.
Code that works for the image:
img {
padding-top:50px;
display: block;
margin-left: auto;
margin-right: auto;
}
Also, I want to move the hyperlinks to the top left, not have them auto assigned if that makes a difference and I cannot touch the HTML code either, just the CSS. (I'm doing a CSS test to see if I'm able to replicate an image of a webpage already done. I'm not doing this as part of coursework or a test at college/uni, I'm a student but I'm on work placement as a software engineer, this is part time homework for me to self-learn).
you can use the percent notation
for example :
img {
padding-top:50px;
display: block;
margin-left: 10%;
}