icon-font next to title then paragraph…must be a more semantic way

[GroovyMotion]

I am probably working too much hours per day on my site, my brain is like a jelly bean right now!

I have an article box in a wrapper, then an icon left of the title and then below I have the text. What I have now is a mess, I can’t make my title an h3 tag, it has to be in a div or else it breaks the layout!

How could this be displayed in a more semantic way?

Here is my pen with what I want to achieve: http://codepen.io/GroovyMotion/pen/GKDjL

Thanks in advance!

[KhaiM]

Can’t you just use the article tag instead? And maybe use an h1 or an h2 tag, give it a class name and set it to display:block;

Or did I miss understand what you’re trying to do?

[GroovyMotion]

I have adapted my site’s layout into it, this is what I have: http://codepen.io/GroovyMotion/pen/ulIFD

edit I made some progress but for me having to give a class to an h3 and a p doesn’t make too much sense…it now works but there must be a simpler way to code this?

[GroovyMotion]

Ok, but now I just realized that this example doesn’t work at all if I consider that I have 3 columns of 33% and in the example I show it’s only one column!

Thanks for the tip, I will have to redo my whole layout for that area!

[GroovyMotion]

Yes, please! :)
http://groovymotion.com/PageStyle_slideshow2.html

I don’t want to redo the whole layout for just this issue!

[GroovyMotion]

you see, my goal is to have the 3 columns centered with a margin of 10px between each and then have what I described above in the columns. It’s a pain to have all this, well for me lol

[GroovyMotion]

@jurotek, wow thanks a lot! Actually I updated the layout quite a lot, here is a different url: http://groovymotion.com/PageStyle_slideshow2.html
I have removed some divs that were basically doing nothing!
I will check out your sample right away.

Thanks again!

[GroovyMotion]

ok…yeah probably just use one of them as a header
What do you think of just using the stairs with the logo as a static one like on this page? http://groovymotion.com/PageStyle6.html
Or maybe widen the image and not make it as tall with more prominence to the logo?

[GroovyMotion]

ok or can you e-mail me?

[GroovyMotion]

oh ok! Yeah you are right, I will probably move the slider to the portfolio section and just make a standard logo.
Thanks!

edit I just realized that my media-queries have easily 50 lines that can be removed by just decreasing the body font size! Instead of starting @ 62.5% it’s best to start @ 100% and decrease for smaller devices, right?

[GroovyMotion]

Yeah 62.5% is easier to calculate but I realized that if I scale to 420px or so then some values become extremely small.
I guess it all depends on what is the audience and what type of content I want to deliver.

[Author]

Posts