Recent
Categories
View Replies (3)

Getting responsive options and other features to display properly

  1. Issue
0
Votes
Undo
  1. Carrie Wrigley
    Carrie Wrigley
  3. Commercial Templates
  4. Tuesday, 14 April 2020
  5.  Subscribe via email
Hey, I renewed my subscription last week, hoping to update the Joomla51 templates on my existing sites to include responsive and social media options. I learned after renewing that those features were there all along - I just hadn't activated them when I originally built the sites. Back then, those features were not that important to me - their importance has increased now.

I recognize now - when I turned these features on (now, and also previously) I ran into several display problems - which is why (I realize now) I just turned these options off before. Now that these features are more important for the functionality of the site, I'm wondering if you can help me resolve these matters?

1) TITLE DISPLAY (in Responsive) - I have the logo area in the header set to display (in text) my company name and tagline. These work fine in the non-responsive option, and also on larger screens in the responsive. But - on my phone, this doesn't work well on responsive - the header text seems to retain its original size, and thus doesn't fit on the smaller screen, but instead is chopping off on the right. Any way to correct this in responsive mode? (perhaps, by reducing font size on small screens, or something similar?)

2) MODULE DISPLAY (in Responsive) - I see that we have the option in the Responsive settings to turn modules off for various positions for the smallest screens (phones.) However, in Responsive on an iPad, the modules (in Responsive mode) display at the very top of the website after the header and slideshow, before the content. I don't want this - if these modules display at all, I'd like them at the bottom of the screen, rather than taking up premium space at the top. Or to not see them at all, as on the phone. Any way to change this?

3) POST UPDATE DISPLAY PROBLEM - After updating Grafik on counselinglibrary.org, my right hand module strip seemed to shrink in width, with a wide grey space to the far right in the margin area - reducing space for my actual content in the middle. I tried playing with template and margin widths to correct this, but to no avail - the wide grey margin remained. Suggestions?

4) SOCIAL ICON PLACEMENT - Once activated, these just seem to "show up" somewhere in the template - for example, on the top of the slide show area. Is it possible to get them instead to display somewhere else - for example, in the top of the header area (title and slogan left social icons right), or at the bottom in a base or footer module? Also - any way to know where the icon placement will be, since not all the J51 demos display these icons?

5) SOCIAL ICON COLOR - Is it possible to get the social icons to display in any colors other than the default Dark or Light (black or white) which don't always match the color schemes of my sites?

6) NUMERIC SETTINGS - TEMPLATE, MARGIN, SLIDE SHOW IMAGE SIZES - I asked this in my last post, but didn't get an answer to this question. In general, what are the recommended numeric settings for these 3 areas? Currently my templates are set to 1080 or 1200, with 15-25% margins on left and right (though I only use the right sidebar). I love how the slide show and content display and fit the screen in the Joomla 51 demos for my templates (Renovate, LetterPress, and Grafik - and hoping to start using Skylar). Can't get it to look the same on my sites. Recommended numeric settings for these elements?

I am hoping to correct these problems and add more content to my site today and tomorrow while I have these days off. So I'm hoping you can get back to me soon on these questions. Thanks again for your lovely templates - in general, love using them. Just don't know how to fix these identified problems. Hope you can help.

-- Carrie Wrigley

PS - My sites using these templates are:
Grafik - https://counselinglibrary.org
Renovate - https://morninglightpublishing.org
Letterpress - https://www.morninglightcounseling.com, https://bookofmormonfamilymusical.org
Responses (3)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Carrie

1. To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

@media only screen and (max-width: 767px) {

p.site-slogan {

    white-space: normal;

    font-size: 12px;

    line-height: 1rem;

}

#container_header {height: 200px;}

.hornavmenu {top: 170px;}

#search {top: 186px;}

#socialmedia {

    display: inline-block !important;

    left: 19px;

    top: 125px;

}}


2. To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

@media only screen and (max-width: 767px) {

h1.logo-text a {

    top: 0;

}

p.site-slogan {

    top: -3px;

    font-size: 12px;

}

#socialmedia {

    display: block !important;

    left: 0;

    float: none;

    top: 86px;

}}


3. Templates are designed to have a percentage width for the side column modules. Slideshow images will display at 100% width regardless of the image size. To ensure I understand you correctly could you provide a URL to an example of the white space you wish to avoid?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Carrie Wrigley
Carrie Wrigley
Accepted Answer Pending Moderation
0
Votes
Undo
Ciaran, thanks for those fixes. A few remaining issues, to make the transition to responsive on these sites:

1 - Letterpress - Slogan and social icons on phone display:[/b] - On https://www.morninglightcounseling.com - Now that I've got the logo text displaying nicely on mobile, I need to also adjust the slogan underneath it. Right now, it's getting cut off on the right side (like the logo text did before your CSS fix). Not only does this fail to complete the intended message, it also crashes into the social media icons on the right side of the header area. Don't know if this can perhaps be programmed for the slogan on small screens to go to a second line, rather than extend all the way to the right - or whatever other fix you might suggest, so the full slogan can be seen, and not crash into the social icons. Maybe to fill the empty blue space currently visible below the slogan?

Actually, I don't see the social icons at all on my iPhone - they are cut off entirely, in both Portrait and Landscape orientation. Any way of displaying these icons in other module positions on the site?

On my iPad - the slogan problem appears also here in Portrait orientation (it's fine in Landscape).

2 - Renovate - Social Icon Placement - On the other site I already got responsive, https://morninglightpublishing.org ( in Renovate), the social icons even on computer aren't displaying correctly - rather than appearing in the header, they're nudged down to the slideshow area on the home page, and at the top of the sidecolb (right column) on the other pages. This is what I was referring to in my prior post, question #4.

Related issue - I also noticed when I turn on the "Search" on this site, it pops in next to the social icons - which is even more disruptive with this current placement - so for now I turned Search off.

Also - currently the header has a lot more empty space above the logo text and slogan than below - could these space allocations be balanced more effectively?

I don't know if perhaps the placement (for social and search) was affected by Custom CSS you sent me before, related to the slogan size and placement. I'm copying in all my Custom CSS for that site here, so you can see if there's anything interfering with proper placement of the social icon and Search, and/or if there's other elements to attend to in fixing this display problem on morninglightpublishing.org:

p.site-slogan {
top: 34px;
}

p.site-slogan {
font-size: 18px;
}
#container_bottom_modules {
height: 300px;
overflow: hidden;
}

.readmore a, input.button, ul.pagination li, li.pagenav-prev, li.pagenav-next, button, .j51-button a, .btn, .pager a, button {
color: #ffffff !important;
}

#container_slideshow .wrapper960,
#slides > div,
.slidesjs-control {
width: 100% !important;
}

3 - Followup question regarding sizes and widths - Could you please clarify your answer on #4 and 6, in your prior response? If I understand right, the templates are designed to have a fixed width in pixels for the template width, and % for the margins. Also of course, the imported slide show photos come in fixed widths (mine are 1200x800 currently). So I'm just trying to find the right numbers to fill those parameters. My current settings are:

LAYOUT OPTIONS:
Template Width (px) - 1400
Side Column Layout - SCS (but I don't use the left column)
Side-Col Width - 15%.

J51SLIDESHOW MODULE
100%width - Yes
Slide Image Width - 1200
Slide Image Height (px) - 800 (these sizes are the original image sizes)

So in your response, were you referring to these settings? Or something else? What I'm trying to avoid is a lot of empty space to the right of my right-hand modules, in sidecolb. When I tried increasing the margin width, it also increased the empty space to the right of the right column, and decreased the space in the middle for the main content. I'd like to avoid excessive empty space on the side of the right column. Current settings are the best I could come up with so far - but perhaps there's a better solution.
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Carrie

1. To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

Edit the font size to your own taste.

@media only screen and (max-width: 767px) {

h1.logo-text a {

	font-size: 2.2rem;

}}


2. To amend also add the following to your Custom CSS field. This should move the sidecol module after your component area on smaller screens.

@media only screen and (max-width: 767px) {

#main {

	display: flex;

	flex-direction: column;

}

#sidecol_a,

#sidecol_b {

	order: 1;

}}


3. Have you tried increasing the width of your side column modules via the Layout Options tab of your template settings? This currently appears to be set to 20% which is the width it is been displayed at.

4. / 5. Would you have a URL to an example of the icons in question? For all of our more recent template releases these icons will be displayed in the header area.

6. Fixed widths tend to be avoided in responsive design, instead opting for fluid widths like percentage. This is to allow content to flow within the various screen sizes. Your choice of side column width is very much down to personal preference and the nature of the content. In general thou widths of the sidecolumn would vary between 26% and 34%.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.