- This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
Viewing 8 posts - 1 through 8 (of 8 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi,
I have these responsive layouts:
As yo can see, in the mobile layout I get social buttons are before the slogan. But I want to slogan before the social buttons. What should I do? Have duplicated slogan and social buttons and toggle them using media queries ? is that smart? Or use jquery to add/remove them? or there is a cleaner solution?
We’d need to see a live link or Codepen to really assist.
Thanks Paulie_D, this is structure I have, is that enough?:
http://codepen.io/maxwbailey/pen/dzfAE
As you can guess, the social buttons are above the h1 to not leave a very big blank space on the right of logo till the end of the h1.
Take a look at this ……… Re-size window for effect.
I don’t exactly like it but: http://codepen.io/Paulie-D/pen/vuqbw
There are some magic numbers in there but, in general it works.
@Paulie_D
I think there will be a problem in your code that when screen will be small then the slogan box height will increase and then slogan box will hide to social box. Because social box is at fixed height.
I’m not sure why any of the boxes should get taller though….There is a ‘tablet’ and ‘mobile’ version in the Codepen…the structure is the same or both and the only difference between the two ‘css’ version is the positioning.
As I said, I’m not happy with it…..it was just a first pass.
Please fork it and tweak away.
I’d have to re-work it with actual media queries to get it better. I would say that I dislike using absolute positioning and try to avoid it if possible…but perhaps in this case?
Hope that works out. They should fix their own site as well though.