-
Search Results
-
Topic: Horizontal Scrolling
I would like to implement horizontal scrolling on my site, and I am hoping to do it using Genesis.
So far, I have managed to find a gallery plug-in from Meow Apps that gets me in the neighborhood of what I want to do. You can see where I am at the moment on my dev site...
I would prefer to have my images fill the browser, and I would like at least some pages/posts that do not offer any vertical scroll. Something like this (not built on WP)...
I found a theme, that is not Genesis-based, that seems to get me close, but I think I want to stay with Genesis...
I am not an expert. If anyone has any ideas or advice for me, I am all ears!
Hello, I am starting with the Genesis Sample theme to develop a custom theme, and one reason I got Genesis to do this was because it says it is Gutenberg ready. Unfortunately, the Gutenberg editing experience seems pretty broken for me so I'm hoping either I'm doing something wrong, or someone has some better CSS I can put in my theme.
The biggest issue I have is that fullscreen items go all the way off the edge of the screen. As a result, I can't drag or reorder them.
In addition, the guide lines and hints that normally appear in Gutenberg when you mouse over different areas to help you visualize which element you're going to select are gone. It's really really hard to edit anything this way.
Additionally, there is horizontal scroll, which should definitely be avoided.
Is this something that went wrong during installation? Or is it the norm? Regardless, is there any popular way to fix it? Thank you very much in advance for any assistance! 😀
Hello,
I noticed this past week that I have somehow clobbered the responsive mobile view for my website, which uses Genesis Sample. I'm not sure when or how I did this. I am using Genesis Sample. My WordPress code and my Genesis + Sample are current.
My website displays fine for a regular browser view, and in horizontal layout view on a table. But vertical layout view on a tablet and mobile phone browsers do not display correctly.
The issue seems to be with my main content div. My wrapper, header, navigation menu, and sidebars display correctly on mobile. It's only the items in my main content area that display wrong. Each post title and body runs off the mobile screen, generating a horizontal scroll bar to see the rest of the title and post, instead of wrapping.
Here are 2 screenshots to illustrate what I am describing.
https://www.screencast.com/t/zLNcK5rq2sV
https://www.screencast.com/t/v8vxt7UqWIf anybody has an immediate hunch of what I need to fix, I'd appreciate it.
Thank you!
Colleen Greene
I use Thrive Architect and eleven40 pro theme.
I have a "References" part at the end of my posts using "paragraph/text" element of Thrive Architect. I place links there, and some of them are very long.
There is no problem when I'm on desktop and tablet - but on mobile, these loooong texts proceed to the right side refusing to break and continue from the next line under that. As a result, on mobile, all my posts show a horizontally scroll bar.
How can I prevent this?
Thanks,
Topic: Altitude Pro Mobile Issues
Hello,
I am working on customizing a website (here) using Altitude Pro. I have run into two small issues in regards to media queries and the responsiveness. I was trying to fix some issues and sorta need some help.
1. Between 1024px and 1200px (most commonly used on iPads), the submenu of the far right primary navigation runs off screen and cuts off the word when on the homepage. Everywhere else, it seems to wrap and fit. How do I fix this.
2. How can I prevent the site from scrolling horizontally when scaled down? I feel like something is oversized and causing this, but I can't figure out where.
Thank you for all your help!
Hi there,
1.
When I add a logo to Showcase Pro Theme the FrontPage Header Image becomes less big and the top Header becomes white. I want add the logo without this change, so image starting from the top like with title text.2.
I also want to change the big white spaces between every sentence. So you don't have to scroll a lot. Where can I find that in stylesheet.css?3.
Is it also possible to change standard horizontal lines of the footer to waving lines (water effect) in css?Can someone help me out?
Kind regards,
Piacevole
[Resolved]Topic: Questions About Media Queries
Friends:
I have a general question about media queries and then a question about a specific problem I'm encountering implementing media queries on a particular site.
A little background might be helpful. My HTML/CSS skills are self-taught, which means they oftentimes seem deficient. I tend to arrive at the final code I use through a trial-and-error process (I know it's not the best and that I should probably take a comprehensive course at some point, but with more than a full-time job and a family, it's sometimes hard to find the time). One of the areas where my knowledge is definitely insufficient is media queries. I'm just starting to use them, and I'm struggling a bit with the concepts.
With that as background, here's my general question: from what I've read, it seems to me that the best approach is not to target specific devices (which would be an endless process I think), but to instead keep adjusting the width of the viewport to find each breakpoint and then create specific media queries for each of the breakpoints I find. Am I on the right track?
Now, the more specific question. I'm working on this site. The stylesheet is here.
The process I have followed so far is this:
1. With a lot of help from Brad at WP Sites, I was able to implement Ambiance Pro so that it displays a single post on the home page.
2. I've adjusted the basic CSS so it displays how I want the home page post to appear when the viewport is wide (1519 pixels wide on at full width on the monitor I'm using).
3. I then wanted to implement media queries. As a start, I removed all of the media queries in the Ambiance Pro stylesheet and saved them.
4. I then started reducing the width of the viewport until the layout broke (I'm using this Chrome extension to adjust the browser width - not sure if that matters or not, but ....). The first breakpoint was at about 1198 pixels (I can't recall the exact width). I created a media query for a max-width of 1230 pixels and the 1198 pixel breakpoint was solved (I set the max-width at 1230 because I wanted to maintain a bit more whitespace in the left and right margins than if I had set the max-width at the actual breakpouint).
5. I then started reducing the width of the viewport further until the layout broke. The next breakpoint was at about 998 pixels (again, I can't recall the exact width). I created a media query for a max-width of 1024 pixels (again, wanting to maintain a bit more whitespace in the left and right margins)
6. So at this point, I have two media queries - one for a max-width of 1230 pixels and another for a max-width of 1024 pixels. But when I started reducing the width of the viewport further, I noticed that at a width of 1000 pixels, I had a problem. Although the layout of the home page had not broken itself, the browser had a horizontal scroll bar.
7. My first thought was that there must be an element in the stylesheet with a width greater than 1000 pixels, but I've checked every class and id on the page and can't seem to find anything that would be the source of the problem.
Any thoughts on how I should approach this? I'm at a loss as to what to do next to figure out the problem. Am I confused? In other words, I'm wondering now if the method I've described above is faulty in some way.
Thanks in advance for any help anyone can offer - it's much appreciated!
Frank
[Resolved]Topic: Responsive table plugin
Hi,
I maintain a site at htttp://strong-indonesia.com and I need tables to display various product specifications. Such product page can be seen at http://strong-indonesia.com/bar-cutter-strong/
Here's the thing. The table is not responsive when displayed in a mobile phone. It doesn't scroll horizontally as well so people can only see the first 2 or 3 rows. I've tried using Magic Liquidizer and Automatic Responsive Tables plugin but they didn't work on my site. I need plugin or method that can all tables responsive at once instead of re-coding all the tables on the site.
Any suggestions?
Thank you
For some reason, my Genesis child theme doesn't allow
tags to shrink with the content even with the "overflow: auto" CSS rule. I display a lot of code on my site and enclose it in
tags. I want it to scroll horizontally and take into account screen sizes etc. But you can see in my "Mocha" child theme, that this doesn't happen:
View post on imgur.com
Thetag is being assigned a fixed width and the rest of my content is being cut off by the screen. I've given a URL as a test page so you can see what happens. Any help would be appreciated. Thanks in advance!
Welcome!
These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.