I've designed and coded an interactive SVG that I've had to implement as HTML in WordPress because it only acts as a useless static image if it's entered as an SVG in an image block.
So far, that means that it's not responsive and loads at full size on a phone. I want people to see it in full, straight away, not zoom out to see it.
Is there another way to make it work without being an HTML dump? And even as code, how would I reduce it to fit screen sizes? Bearing in mind that my brain may implode if you suggest coding breakpoints or something like that.
I'm using a Blocksy child theme with no page builder.
The code itself works fine so there seems no point in me pasting a shortened version of the code. The page is here, if that helps.
Www.orderaround.co.uk
Right, I've fixed it myself. All I needed to do was remove the width and height specifications from the beginning of the svg code. It now fits to whatever container it's being displayed in.
I'm developing a WordPress website and have some trouble with the header width on some specific screens as you can see in the image below.
Does anybody know where I can adjust this in my template? (I guess it has something to do with the min-width.) To take a deeper look, the URL is www.brainfarts.shop.
I think this is an error with the media queries, I see the trouble when I change the width between 1,000px and 1,280px (both widths included).
I don't know much about Wordpress but if I were you I would try to mess with the site changing things with the element inspector of any browser and then try to apply the changes in some place in your Wordpress, in some section where you can insert your code (css).
I am working on my first website and I encountered a problem with the responsiveness of the fields in my search form. I use Wordpress theme and plug-ins and I am overriding their styles with my own.
The field groups for "Price"and "Build-Up Area" don't behave as expected when I change the size of the browser window. I created media queries for every browser size which breaks the structure, but it seems that I need about 10 separate queries, even more, which I consider as inappropriate.
(e.g. I have a query for max-width 780px and then it appears that I have to create another one for max-width 767px, because for that browser size the structure is broken again) .
I have red the original CSS code of the theme/plug-in, but I can't understand where the problem comes from.
What am I doing wrong?
Thank you in advance!
my website
Dont write css as per window size. Set the width in % for all screensize. For mobile, show the input field as one by one width as 100%.
I have been trying to code a responsive thumbnail group that I'd like it to respect to a few rules.
I came very close but the implementation always end up not satisfying at least one of the rules. In other words when I try to do one thing it always cancels the other.
In summary, what I am trying to achieve is something like this -
http://postimg.org/image/4yx6poscz/f57d6517/ (I wasn't allowed to post a picture, sorry)
So basically, what I am after is;
When the user resizes the window the thumbnails (consist of an image and some basic HTML) will shrink up to a point.
When the breakpoint is reached, the most left one will disappear and the rest of the thumbnails will return to their original size.
Continue until the min-body size where we just display the x-axis scrollbar.
So, referring to the image, providing that no resizing is done just yet, the items will shrink, lets say until 20% and then Item 7 will disappear letting free space to the rest of the row to expand to their original size.
I am currently using the latest version of bootstrap however, as you may guess col-lg col-md and etc. classes are not really helpful in this case. I have come up with some custom breakpoints but I can't get my head around the shrinking back to the original size issue. That is where I get stuck.
Also I think it's worth mentioning that Ive been trying to come up with a solution that is pure HTML and CSS however I am definitely open to JS solutions as well.
A good example would be spotify's webplayer (play.spotify.com) thumbnail examples.
Thank you very much in advance for your suggestions.
As a web developer, I have to cut a layout similar to this (example website by Ruben Bristian):
Should I bother with cutting multiple small images like a logo:
a label:
and so on? Or should I just make one big background image with all elements like this:
and make a positioned <a href> with display: block; for a linked logo?
A single image has smaller size than multiple elements altogether. What are the other pros and cons?
Use separate images.
Here are a few reasons why:
Maintenance:
It's going to be much easier to maintain in the future, if/when there comes a point when you want to build on what you already have. Furthermore (and subjectively), the background image is not critical to the design. It wouldn't look broken if parts of the background were clipped. It would look broken however, if the logo were distorted.
Bear in mind also that newer, sharper displays are being developed. It's much easier to display the standard resolution background (it's already blurry, so clarity is not essential), and maintain two versions of the logo. One for standard displays, one for HD.
Semantics: What if the user has images disabled? Sure, it's unlikely, but what about Google? You should have some proper markup with real content. Your site needs real textual content in order for Google's crawlers to gather information about it. Use CSS image-replacement techniques to build the interface.
Another note on HD displays:
It's convention to serve larger images to HD (retina) displays, and use CSS to downsize them, effectively increasing their dots-per-inch. If you use just one image, the user will have to download a considerably large image. More bandwidth used by you, and slower experience for your users.
Furthermore, the text will look horrible on HD displays. It makes much more sense to allow the browser to render razor-sharp text to the user.
Accessibility: For a start, screen readers won't have a clue what your site is about. That might not be so relevant in this case, but it's best practice to build and accessible website. If you want to include some smaller text on the site, some users may be unable to read it. Normally they would increase the font-size, but if you use images, they're powerless.
I may have over-dramatised this answer, but the advice is well-intentioned.
I would honestly try a little bit of a different approach. The "photo" part of the image would be one image, the logo another, and maybe the double bar on either side of the heading another (but might not be necessary.
I would use the photo part as a bg image on a div, and within code the rest.
I wouldn't make the text part of the image at all. Try using a service like Google Web Fonts to get a good font.
The approach will save you lots of maintenance time, and also help with performance.
PROS:
Total bytes loaded is lower.
You do not have to worry about how little images are put together to become the total image.
if you just use 1 image you will find that it will be much easier to maintain the fluidity of the layout. You will not have padding/alignment issues, rendering issues, etc. Realistically the load time should be the same either way, maybe a tad longer for multiple images as the browser would have to render more css, but i imagine it would not be very noticable. In the end it really comes down to what is better for the job. I pretty biased towards 1 clean image :)
I guess you have to think about how you are going to use each element individually, and how they are going to change in the future.
You might want to change the logo, animate it, or want to re-use it elsewhere. The background image might change, or become multiple images in some sort of transitional gallery.
If this its never going to change (unlikely), then, yes, flatten it in a single image.
I personally would have as a separate background image. Then perhaps have the logo and the label on another transparent png and utilise css sprites to re-use them throughout the site. This will halve the number of requests required to download the logo/label, and allow you to optimise each image separately ie the complex background photo, and the more simple logo/label.