Jump to content
fed022

Responsive Adjustments without Breakpoints

Recommended Posts

Hi everyone! :)

 

I'm using the "Electric Multi-Purpose HTML5" theme from ThemeForest and I have to limit the width to 1000px instead of 1300px which wasn't a problem to change in the css file of course. http://treacle.faceversa.net/assets/custom/css/style.css

The boxed layout has changed to 1000px now but some parts like the portfolio do not adjust to it, as it can be seen in the screenshots below. Or here: http://treacle.faceversa.net/

 

At first I thought I could fix this via breakpoints, but there are only breakpoints for the screen sizes 400, 768 and 992 included. When I bring the browser window to a size of about 1170px everything looks fine (picture below). I would like to know what is influencing these adjustments if it is not a breakpoint. Are there relative css attributes used? Could someone tell me which attributes I would have to change or if there is a global parameter to make these adjustments happen, even if the browser window is bigger than 1170?...

I hope its understandable what I would like to do; it would be awesome to get some help; I was working on this for so long now and the author of the template doesn't respond. :(

post-187599-0-56412800-1438222535_thumb.jpg

post-187599-0-90224200-1438222537_thumb.jpg

Share this post


Link to post
Share on other sites

That happens because the elements have position: absolute in their style. The person who made that is not following responsive design principles.

 

The right way to do it would be to give them percentage widths and float them to the left.

Share this post


Link to post
Share on other sites

Thanks for the fast reply! :) - Okay, I see.

But which attribute for example influences the pictures of the portfolio (as seen on the screenshots) to get smaller when the browser window gets smaller than 1170px? Because there is no breakpoint, but the whole site starts to center and to adjust to the screen size at around 1170px.

I would like to keep these changes even if the browser window gets bigger than 1170px - how could I do that?...

Share this post


Link to post
Share on other sites

I fixed it! The author is using bootstrap. There actually is another break point for 1200px but not in the main CSS file, but in the bootstrap one. Now everything looks great; may be off topic, but I'm happy :) Was looking for this for such a long time now. Even though; thanks again for the fast reply and help! :) Cheers from Hong Kong

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...