Responsive WordPress Theme – Caliber

A theme with simple controls and limitless potential. Work fast and build an amazing website!   Find out more »

UpThemes – Beautiful WordPress Themes

Create a site your church, gallery, newspaper, blog, recipes, band and more!   See the themes »

Need a little help?  Find answers quickly by searching the forum.
Group Admins
  • andy
  • jeffw

Support for: Razor: Cutting Edge WordPress Theme

Razor

Public Group  |  active 1 year, 8 months ago ago
Viewing post 1 to 7 (7 total posts)

Responsiveness causes thumbnails to be placed on top of each other

  • udgang99

    said

    On my main homepage I have a bunch of thumbnails that links to content. Check it out here: http://www.comicjams.net (it’s the square thumbs for “comicjams” I’m talking about).

    Now that RAZOR is responsive, I have tried two ways of displaying the thumbs, but each way gets a little (or lot) messed up the smaller the screen gets.

    I have made most of my thumbs with plain images with space between, and they look “mostly” okay, except the rows don’t flow naturally in smaller screens. (Yes, I know, it’s REALLY hard to describe – but check out the site, and you’ll see what I mean!!!)
    If I set up the thumbs in collums of five (That’s the ones where I write “Attention Razor suport”), they very quickly places them on top of each other, even though there is still plenty of room to place them (or some of them) next to each other.

    Can you suggest a way for me to display my thumbs in RAZOR, that keeps looking good no matter what screen size the viewer is on?!?

  • jeffw

    said

    Hi, udgang99.

    Such are the challenges of designing websites that look good on every type of display. Welcome to the club. :D

    I’ve visited your home page and I don’t see any particular issues with the responsiveness other than with the 1/5 column at narrow screen sizes which I think is probably reacting to a minimum width rule.

    If you’d care to post the exact content you are using for your home page then I’ll be glad to take a closer look. There isn’t any easier way for me to understand what you have done than seeing that exact content (i.e. exactly what you have entered into the WordPress content area for that page).

    To include code in your posts – such as shortcodes, HTML, CSS, PHP – please follow the instructions on the forum home page.

    I always use the [portfolio] shortcode for this type of display and I don’t generally have any responsive issues. Sometimes I need to tweak the shortcode attributes a bit, but I generally end up with something acceptable.

    If you have a particular gripe with how Razor deals with a single responsive issue (rather than a whole page of different issues, some of which don’t appear to be issues) then please start a new topic for each separate issue and let’s please deal with one issue at a time.

  • udgang99

    said

    Hey Jeff, thanks for taking the time!!!

    Okay, this is the code that I am using for the first set of five icons on my page (under the title “Active Comicjams”) :

    <h4><i class="icon-pencil"></i>  Active Comicjams</h4>
    <a href="http://comicjams.net/zero"><img class="alignnone size-full wp-image-6795" src="http://comicjams.net/wp-content/uploads/2013/03/zero_thumb.jpg" /></a>    <a href="http://comicjams.net/surface"><img class="alignnone size-full wp-image-6795" src="http://comicjams.net/wp-content/uploads/2013/03/title_surface.jpg" /></a>    <a href="http://comicjams.net/fusion-odyssey"><img class="alignnone size-full wp-image-6795" src="http://comicjams.net/wp-content/uploads/2013/03/title_fusion.jpg" /></a>    <a href="http://comicjams.net/eat-dust-gringo"><img class="alignnone size-full wp-image-6795" src="http://comicjams.net/wp-content/uploads/2013/03/title_gringo.jpg" /></a>    <a href="http://comicjams.net/byond"><img class="alignnone size-full wp-image-6795" src="http://comicjams.net/wp-content/uploads/2013/03/title_boynd.jpg" /></a>

    In the next section I have ten icons, and I’m just duplicating the above code twice. But depending on the width of the screen the space between each icon CAN make the icons placed uneven (like one is not aligned with the one below it, but is placed 5-10 pixel left of it). Here is THAT code:

    <h4><i class="icon-pencil"></i>  Legacy Comicjams</h4>
    <a href="http://comicjams.net/zero"><img class="alignnone size-full wp-image-6795" src="http://comicjams.net/wp-content/uploads/2013/03/zero_thumb.jpg" /></a>    <a href="http://comicjams.net/surface"><img class="alignnone size-full wp-image-6795" src="http://comicjams.net/wp-content/uploads/2013/03/title_surface.jpg" /></a>    <a href="http://comicjams.net/fusion-odyssey"><img class="alignnone size-full wp-image-6795" src="http://comicjams.net/wp-content/uploads/2013/03/title_fusion.jpg" /></a>    <a href="http://comicjams.net/eat-dust-gringo"><img class="alignnone size-full wp-image-6795" src="http://comicjams.net/wp-content/uploads/2013/03/title_gringo.jpg" /></a>    <a href="http://comicjams.net/byond"><img class="alignnone size-full wp-image-6795" src="http://comicjams.net/wp-content/uploads/2013/03/title_boynd.jpg" /></a>    <a href="http://comicjams.net/zero"><img class="alignnone size-full wp-image-6795" src="http://comicjams.net/wp-content/uploads/2013/03/zero_thumb.jpg" /></a>    <a href="http://comicjams.net/surface"><img class="alignnone size-full wp-image-6795" src="http://comicjams.net/wp-content/uploads/2013/03/title_surface.jpg" /></a>    <a href="http://comicjams.net/fusion-odyssey"><img class="alignnone size-full wp-image-6795" src="http://comicjams.net/wp-content/uploads/2013/03/title_fusion.jpg" /></a>    <a href="http://comicjams.net/eat-dust-gringo"><img class="alignnone size-full wp-image-6795" src="http://comicjams.net/wp-content/uploads/2013/03/title_gringo.jpg" /></a>    <a href="http://comicjams.net/byond"><img class="alignnone size-full wp-image-6795" src="http://comicjams.net/wp-content/uploads/2013/03/title_boynd.jpg" /></a>

    And FINALLY, here is the code I was trying out for the five collum test (which just quickly placed all icons in a vertical line):

    [one_fifth]<a href="http://comicjams.net/zero"><img class="alignnone size-full wp-image-6795" alt="Zero" src="http://comicjams.net/wp-content/uploads/2013/03/zero_thumb.jpg" /></a>[/one_fifth]
     
    [one_fifth]<a href="http://comicjams.net/zero"><img class="alignnone size-full wp-image-6795" alt="Zero" src="http://comicjams.net/wp-content/uploads/2013/03/zero_thumb.jpg" /></a>[/one_fifth]
     
    [one_fifth]<a href="http://comicjams.net/zero"><img class="alignnone size-full wp-image-6795" alt="Zero" src="http://comicjams.net/wp-content/uploads/2013/03/zero_thumb.jpg" /></a>[/one_fifth]
     
    [one_fifth]<a href="http://comicjams.net/zero"><img class="alignnone size-full wp-image-6795" alt="Zero" src="http://comicjams.net/wp-content/uploads/2013/03/zero_thumb.jpg" /></a>[/one_fifth]
     
    [one_fifth_last]<a href="http://comicjams.net/zero"><img class="alignnone size-full wp-image-6795" alt="Zero" src="http://comicjams.net/wp-content/uploads/2013/03/zero_thumb.jpg" /></a>[/one_fifth_last]

    If at all possible, what I’m looking for is a way to display a bunch (let’s say 10) of icons in rows of five. So at “full screen” it’s 5 icons on top and 5 icons at bottom. If the screen is slightly smaller. it would be 4 icons on top, 4 in the middle and 2 at the bottom. Smaller again it would be 3+3+3+1 … aso. And they would all be nicely alligned. IS this possible? ;-)

  • udgang99

    said

    Well, I found a solution that might work … it’s not pretty, but it seems to work.

    After the code for each icon, I place this: <span style="color: #ffffff;">x</span>

    It places a white X after each icon, which is enough to keep them in line … so far. :-)

  • jeffw

    said

    Hi, udgang99.

    I’ve had a good look at your code and the way the Razor theme deals with it responsively and I don’t see any issues. The Razor theme is doing exactly what I would expect it to do with your content, and it does exactly the same thing in other responsive themes, such as in the WordPress Twenty Twelve theme for example. A gradually narrowing browser window is first going to display 4+1, then 3+2; this is perfectly normal behaviour for a responsive web page.

    I don’t know any way in HTML or CSS to “glue” two images together so that they wrap together in a responsive layout. There might be techniques that can accomplish this, but I don’t know any. The solution you propose is intriguing, although I’m not sure I understand where you have added this HTML and what you mean by “keep them inline”.

    With the column shortcodes, as less width becomes available the columns will become narrower until a point when the theme deciders that the columns cannot sensibly be any narrower, and at this point the theme will stack the columns one on top of the other, full browser width. Column shortcodes were not primarily designed to be containers for images in the way that you are using them. The responsiveness I have just described makes perfect sense for columns that contain text or mixed content.

  • concepta

    said

    this is the problem I have … on my page layout I have used 1/4 container and divided page into 4 1/4 , so four colums … i have a static block containing just one image in each … all looks fine on desktop with 4 images side by side one in each column but when I look at it on mobile they are all one on top of each other as if only one column? there must be a solution that I can try to solve this … can I try anything apart from updating to latest version … anything?

  • jeffw

    said

    @concepta

    Please do not post the same question in multiple topics, all that does is make extra work for us.

    I have replied to you in the topic that you created for your specific issue. As you well know, you are using a very old version of Razor and until such time as you update the theme there is nothing else we can do to help you. So far you have refused to update the theme, so there it is.

    I am closing this topic now because it is more than three years old and totally irrelevant to any issue you may have with the current version of Razor.

Viewing post 1 to 7 (7 total posts)