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! 😀
I am using News-pro theme to develop a news website. I wanted to add a video widget right after Home-Bottom widget. This widget could display 5 or 6 videos in a horizontal row in scrolling format. Is there any way to do that, please?
Thanks and regards
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.
If anybody has an immediate hunch of what I need to fix, I'd appreciate it.
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?
Topic: Altitude Pro Mobile Issues
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!
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.
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?
Is it also possible to change standard horizontal lines of the footer to waving lines (water effect) in css?
Can someone help me out?
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?
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!
Topic: Responsive table plugin
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.
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:
tag 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!
A client of mine wants a website similar to this one at http://www.audreyazoura.fr
The problem is that it's not WordPress and does not appear to be responsive. I was wondering which of my Studiopress themes (if any) could be used to mimic this website with a vertical scrolling slider instead of the typical horizontal ones. Any ideas?[Resolved]
I bought the Hello Pro theme a week ago and am having trouble making it look like the demo. I use MailChimp for my emails. The email opt in section of the home page currently looks like this:
I want it to be identical to the Hello Pro demo page, which is here:
See how in the demo everything is on one line and it is all horizontal? I want it to look like that.
Here is the code I have used to get what I have so far:
<span class="optin">LEARN THE LATEST</span>
<!-- Begin MailChimp Signup Form -->
<form action="//sandyeulitt.us7.list-manage.com/subscribe/post?u=7d661f6b66ad32f376eedefbc&id=2048a109d5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<label for="mce-FNAME">First Name <span class="asterisk">*</span>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_7d661f6b66ad32f376eedefbc_2048a109d5" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
If you reply, it would be really helpful if you could give me the code that needs to be changed, tell me where, and why. I used to be a programmer, but I never learned HTML. I can sort of read this and screw around with it some, but not a lot. I am trying to learn, but need to get this website up and running first.
Thanks very, very much for your help.
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.