HTML embed for responsive div block size

Design help General
1

HI, so I am trying to create a fully responsive site, and i had implemented HTML Embed’s in various div blocks that create additional breakpoints and adjust font sizes and line heights… however i also need to adjust the block sizes at the various breakpoints as well and I can’t figure out the syntax to achieve that… the code that I use is:

@media (max-width: 992px) {.card-blue-1-text {font-size:48px;line-height:55px;}}

I add this to every necessary div block while adjusting the class.
what should I add to the code to change its size in “px” (the div block size is in a different class)

Thanks in advance!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

If you’re style for this div block is in the same breakpoint your code should look something like this:

<style>
@media (max-width: 992px) {
    .card-blue-1-text {
        font-size: 48px;
        line-height: 55px;
        }
    .DIV-BLOCK-CLASS {
        max-width: 200px;
        }
    }
</style>
3

thank you so much - my problem was I was using just “width” not max-width…

1 Like
4

Actually again I must be missing something… so what I have is the following code:

"
@media (max-width: 1955px)
{.card-blue-1-text {font-size:78px;}}

	@media (max-width: 1745px) 
{.card-blue-1-text {font-size:75px;}}

	@media (max-width: 1480px) 
{.card-blue-1-text {font-size:70px;}
.WRAPPER-Fostering-Developing {max-width: 600px;}}

	@media (max-width: 1385px) 
{.card-blue-1-text {font-size:65px;}}

	@media (max-width: 1290px) 
{.card-blue-1-text {font-size:60px;}}

so nothing happens unless i close the style section right after the “max-width” statement… I must be doing something wrong… and if I do close it, then it resizes a different amount than I instruct it.

I am not very experienced with HTML/CSS - I am mostly trying to to figure it out… so if you don’t mind providing some additional clarification

5

NVM, I think I sorted it out - it was an issue of placing the string in the previous “max width”

1 Like