Tagged: css problem, responsive
-
AuthorPosts
-
March 19, 2014 at 4:00 pm #240113
HI
I have a page with four columns for a series of short listings, which looks fine (when I’ve sorted out my ugly colours) on large screens and mobile screens, but on mid-sized screens where the display is two above and two below there is a misalignment. It’s as if the first one [av_one_fourth first] is narrower than the others causing the second column to move to the left so that it is more towards the centre rather than above the field at the bottom right.
You can see this at http://www.ccrasa.com/carbon-credit-information-library/I have v.2.6.1 and have not yet installed the update from the last 24 hrs
Thanks
TimMarch 20, 2014 at 9:15 pm #240869Hey Tim!
The formatting of the columns is incorrect but I think its in how the shortcodes are laid out. the first three shortcodes are wrapped in library_entry but the last one isn’t.
Best regards,
DevinMarch 21, 2014 at 7:11 am #241042HI Devin
The wrapper div had missed the last quarter you’re right. I’d seen that and tried it around all four in a different view but it made no difference, and for some reason that wrapper div doesn’t work for me and no style is applied, which would help a lot when there more articles in the library. I have placed the div in the second quarter once more ‘library_author’ so that it is the same as the others. No change though
I made a page and saw that Enfold normally displays four columns perfectly and no misalignment problems as the size changes, but not in this instance.<div class=”library_entry”>
[av_one_fourth first]
<div class=”library_file”>[231]</div>
[/av_one_fourth][av_one_fourth]<div class=”library_author”>[198] [199] [211] , [227] [228]</div>
[/av_one_fourth][av_one_fourth]
<div class=”library_category_selection”>[725]</div>
[/av_one_fourth][av_one_fourth]
<div class=”library_keywords”>[738]</div>
<div class=”library_keywords”>[735]</div>
<div class=”library_keywords”>[739]</div>
<div class=”library_keywords”>[737]</div>
<div class=”library_keywords”>[736]</div>
[/av_one_fourth]</div>
- This reply was modified 10 years, 9 months ago by KingConga.
March 23, 2014 at 2:00 am #241699I can only guess there is some conflict with the wrapping of shortcodes or the div. The output is still incorrect for how it should be getting spit out.
On my live version of 2.6.2 I copied the same thing you have above but the output is correct and without any issues.
April 10, 2014 at 9:44 pm #249933I’ve continued this thread because it’s the same place. The misalignment problem seems to have fixed itself with a theme update. but I have major problems in this page. I can’t get the simplest of css to work reliably or consistently.
Here is the URL again. http://www.ccrasa.com/carbon-credit-information-library/
I am trying just to put each entry a colour background and a small margin, then I can do some :hover effects and easing of those. I can’t even make a background box that stays in the right place – as you will see from the ‘column headings block’ at the top of the entries. I’ve spent ages trying to do the most basic thing. Looking at the source I can see one remnant from a library system that I as trying that I can’t see in my editor, but that is commented and isn’t the problem. <p><!– [fileaway color=”purple” iconcolor=”red” style=”silver-bullet” paginate=”yes” type=”table” pagesize=”40″ mod=”no” corners=”roundright”] –></p>.
Any light you can shed will be gratefully received. The bit I have no cntrol over is written in the Formidable View editing window and is placed in the page with a shortcode.
This is an example of the sort of thing that happens http://dev.ccrasa.com/carbon-credit-information-library/
thanks
Tim- This reply was modified 10 years, 8 months ago by KingConga.
April 10, 2014 at 10:43 pm #249954I’ve had alittle help – (the support at Formidable are really excellent)
The green color is coming from http://www.ccrasa.com/wp-content/uploads/dynamic_avia/ccrasa_2013.css?ver=1 near line 1: and The blue color is coming from http://www.ccrasa.com/wp-content/uploads/dynamic_avia/ccrasa_2013.css?ver=1 near line 6: They were both mine, one was a background and one was a border.
You can see the problem the blue band is supposed to be a background for all of ‘column header’ It is a div that contains the ohers.April 11, 2014 at 12:17 am #249976I’ve got past a couple of problems (my bad spelling) but am at a new obstacle.
I have applied {text-align : center;} to the article titles, but the rule is being applied inconsistently.
If you look soon at http://www.ccrasa.com/carbon-credit-information-library/ you will see some of the entries’ article titles centred and some are justified to the left.
The entries are output from a Formidable form entries.. I have a few styling moves planned yet but it’s all happening very slow for me today.
Thanks
TimApril 11, 2014 at 1:00 am #249981Hey!
Please add following code to Quick CSS as well
.library_file { width: 100%; }
Cheers!
YigitApril 11, 2014 at 4:02 am #250065Thank you Yigit,
Thanks for the line, I’ve put it in. It seemed to stabilise – one of those things that will probably remain a mystery for some time. I clear the browser cache when I look at problems, and there is no particular site caching going on yet that I’m aware of.
tregards
TimApril 11, 2014 at 1:46 pm #250212 -
AuthorPosts
- You must be logged in to reply to this topic.