Is it possible to change the size of a fixed text to image code? - html

First of all, excuse my poor wording of the question. Still a novice.
I'm dealing with a packing slip template that's html based and I was asked if I can make the barcode bigger. I don't have access to the barcode itself, all I can do is call it by typing gnShortBarcode (calling barcode gives me a longer version of the barcode and they don't use that one.) I tried putting it in a div and making the entire div bigger and that didn't work. Is it even possible? Just to reiterate, the code looks something like <p> _gnShortBarcode_ </p> which is why it's so weird to me. it not calling a class or anything where I can re-adjust the barcode dimensions myself.
I appreciate any sort of help given. Even as simple as helping me re-wording the question for future purposes. Any tips are welcome.

Related

Layered Images for Email-specific HTML

I am looking for some insight on how to achieve a certain result with email-specific HTML+CSS. I've done some searching and I can't really find anything quite specific enough to fit my needs. I am a decently experienced front-end website designer/builder, but I am new to email HTML. My clients have always used a drag and drop service, but I want to be able to offer higher-quality email designs.
Here is an image that shows my desired outcome, with the green color being the background of the body of the email so that the shape just blocks out the correct parts of the image:
I know this might not be possible with the limited html/css that is required in email design, but if it is I'd love to see an example of it working or if anyone knows a good resource to learn the ins and outs of email code I'd really appreciate it.
My idea originally was to use image 1 as the background of a table, then the 2nd layer of the table, use image 2 as the background, or just add in the image inline with full width. I'd love to be able to put text positioned center, but again that might not be possible, I just don't know the limitations well.
Thanks!

How is this website performing this particular function?

I am looking at this website here, https://www.symbolab.com/
, and in particular the matrix entry function on it. Pressing the icon with the brackets to the left of the H2O icon will take you to it.
Now, you are then prompted to enter your own user-defined size of matrix. Below then in a text area then appears the blank matrix, with the predefined text fields arranged in an array.
I am wanting to replicate something similar myself, and was wondering how this site was performing this function. I am new to HTML and was wondering what components were being used here? Is the larger area that the matrix is contained in a canvas? Are the fields of the matrix Input Type Text fields? If so, how is the resizing dynamically achieved as the user enters text?
Anyone know? :)
Jeremy
The first step when you want to know what's happening behind a website is to open the console and look at the code and scripts. I think that the textarea used into your example is a basic textarea.
If your looking for a textarea that auto-resize, you can achieve this in JS. Maybe that post can help you.
If your looking for a way to write math formula into an HTML page, there is several solutions for you on the web. That stackoverflow post propose to use MathJax.
Hope it helps you a bit.

how to style text around the circle easily?

well currently I'm converting a PSD file and it has a section like this
luckily in PSD there is a different layer called graph and when I pull it from there the text content look like this
is there any easy way to style content like this. I never did this before like this. can anyone please give me a little instruction.
Pretty sure you could do this with a grid system. I'm seeing a series of three columns, with some text being left, right, or center aligned.
If you're familiar with using a css grid, the following image will be familiar to you.
This won't tell you precisely how to code it but it might help you conceptualize the problem in a way that's easier to write in code.

Baisic table layout background or container issue mainly on Apple device's

So the title pretty much say's it all, In case anyone is interested I'm self thought so please don't be so hasty to say I did no research or put any effort into this because I've messed around with a lot of various things on this somewhat BS page and searched using Google Yahoo and Bing looking for a similar issue. Basically the table layout seems to to get like a default transparent overlay, I noticed its only directly on the table because the background images are clearly visible when scrolling past the top of the page and its visible in each table cell.
Like I said I've tried various things with no luck but if this is just some common newbie mistake please point me to some reading material or even a good book for web design as I could really use the know how and wouldn't mind learning something as apposed to shooting in the dark with random bits of HTML, CSS and JavaScript in the little free time I do have..
*Also I was doing all this using blogger as my "host" mainly because I plan to ingrate the blogger framework or whatever into the page after I know its good to go. Find a link to the page below, If you need the raw HTML not formatted to blogger just let me know.
https://layout-dev.blogspot.com
Turns out the image host for the body background-image wasn't loading in the image on apple device's, still not sure why but after relocating the image to my personal Dropbox and directly linking to it that solved the problem. *As weird as that may sound the original url was http://subtlepatterns.com/patterns/binding_dark.png and simply replacing it with https://dl.dropbox.com/s/njcu65h90cmsbp8/binding_dark.png solved the problem. -Figured I should post the answer just in case someone ever has a similar issue.

HTML UI input slider being pushed out of position

Hi guys, in the above image there is a screenshot of a UI I am working on for the purposes of a college assignment which involves manipulating the DOM using JQuery.
Currently I have the logic working and I am now trying to tidy my code and enhance the UI. I'm not sure if this is the correct place to ask this question as strictly speaking I do not think it is a programming issue but I thought I'd take my chances!
For some reason the slider in the image above is being pushed out of place and I have no idea why. Does anyone know what might be causing this??
The stylesheet is huge so I don't want to include it, unless you need to see a certain part.
Any help is much appreciated.
In the image the circle shows the slider trailing off the UI. The arrow points to where It should be located. The underlined slider is how it should also be appearing.